import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";

import {
    AreaChart,
    Area,
    BarChart,
    Bar,
    RadarChart,
    Radar,
    PieChart,
    Pie,
    XAxis,
    YAxis,
    CartesianGrid,
    PolarGrid,
    PolarAngleAxis,
    PolarRadiusAxis,
    Tooltip,
    Legend,
    ResponsiveContainer,
    Cell,
} from "recharts";

const sections = [{
    id: "hero",
    title: "首页"
}, {
    id: "pain-points",
    title: "市场痛点与机会"
}, {
    id: "product",
    title: "产品概述"
},
{
    id: "system-design",
    title: "产品架构与创新点"
},
{
    id: "architecture",
    title: "系统设计"
},

//  {
//     id: "architecture",
//     title: "技术架构"
// }, 
// {
//     id: "innovation",
//     title: "核心优势"
// }, 

{
    id: "performance",
    title: "性能对比"
}, {
    id: "business",
    title: "商业价值"
}, {
    id: "implementation",
    title: "实施路径"
}
    ,
//  {
//     id: "team",
//     title: "团队介绍"
// }, 

{
    id: "future",
    title: "未来展望"
},{
    id: "sources",
    title: "资料数据来源"
}];

const marketData = [{
    year: "2023",
    value: 60
}, {
    year: "2024",
    value: 85
}, {
    year: "2025",
    value: 120
}, {
    year: "2026",
    value: 160
}];

const efficiencyData = [{
    name: "简历处理速度(份/小时)",
    传统方案: 125,
    AI方案: 3000
}, {
    name: "招聘周期(天)",
    传统方案: 15,
    AI方案: 2.3
}, {
    name: "人力成本(相对值)",
    传统方案: 100,
    AI方案: 30
}];

const accuracyData = [{
    subject: "基本信息解析",
    传统方案: 80,
    AI方案: 98
}, {
    subject: "工作经历提取",
    传统方案: 70,
    AI方案: 95
}, {
    subject: "教育背景识别",
    传统方案: 75,
    AI方案: 96
}, {
    subject: "技能标签提取",
    传统方案: 65,
    AI方案: 92
}, {
    subject: "专业术语理解",
    传统方案: 60,
    AI方案: 90
}, {
    subject: "复杂排版处理",
    传统方案: 50,
    AI方案: 88
}];

const profitData = [{
    name: "SaaS订阅模式",
    value: 45
}, {
    name: "按量计费模式",
    value: 25
}, {
    name: "增值服务模式",
    value: 20
}, {
    name: "合作伙伴模式",
    value: 10
}];

const teamCompositionData = [{
    name: "算法工程师",
    value: 50
}, {
    name: "开发工程师",
    value: 25
}, {
    name: "产品与运营",
    value: 25
}];

const COLORS = {
    primary: "#4F46E5",
    secondary: "#8B5CF6",
    accent: "#10B981",
    light: "#EEF2FF",
    dark: "#1E293B",
    gradient: "bg-gradient-to-br from-indigo-600 to-purple-600",
    chartColors: ["#4F46E5", "#8B5CF6", "#10B981", "#EC4899"]
};

export default function Home() {
    const [activeSection, setActiveSection] = useState("hero");
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const sectionRefs = useRef<Record<string, HTMLElement | null>>({});
    const headerRef = useRef<HTMLElement>(null);

    useEffect(() => {
        const handleScroll = () => {
            const scrollPosition = window.scrollY + 100;

            if (headerRef.current) {
                if (scrollPosition > 50) {
                    headerRef.current.classList.add("bg-white/90", "backdrop-blur-sm", "shadow-md");
                    headerRef.current.classList.remove("bg-transparent");
                } else {
                    headerRef.current.classList.remove("bg-white/90", "backdrop-blur-sm", "shadow-md");
                    headerRef.current.classList.add("bg-transparent");
                }
            }

            for (const section of sections) {
                const element = sectionRefs.current[section.id];

                if (element) {
                    const offsetTop = element.offsetTop;
                    const offsetBottom = offsetTop + element.offsetHeight;

                    if (scrollPosition >= offsetTop && scrollPosition < offsetBottom) {
                        setActiveSection(section.id);
                        break;
                    }
                }
            }
        };

        window.addEventListener("scroll", handleScroll);
        return () => window.removeEventListener("scroll", handleScroll);
    }, []);

    const scrollToSection = (sectionId: string) => {
        setIsMenuOpen(false);
        const element = sectionRefs.current[sectionId];

        if (element) {
            window.scrollTo({
                top: element.offsetTop - 80,
                behavior: "smooth"
            });
        }
    };

    return (
        <div
            className="min-h-screen bg-gray-50 font-['Inter'] text-gray-800 overflow-x-hidden">
            { }
            <header
                ref={headerRef}
                className="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-transparent py-4 px-6">
                <div className="max-w-7xl mx-auto flex justify-between items-center">
                    <div className="flex items-center space-x-2">
                        <div
                            className="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center">
                            <i className="fa-solid fa-brain text-white"></i>
                        </div>
                        <span
                            className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600">慧眼AI·简历解析系统</span>
                    </div>
                    { }
                    <nav className="hidden md:flex items-center space-x-8">
                        {sections.map(section => <button
                            key={section.id}
                            onClick={() => scrollToSection(section.id)}
                            className={`text-sm font-medium transition-colors hover:text-indigo-600 ${activeSection === section.id ? "text-indigo-600 border-b-2 border-indigo-600 pb-1" : "text-gray-600"}`}>
                            {section.title}
                        </button>)}
                    </nav>
                    { }
                    <button
                        className="md:hidden text-gray-700 focus:outline-none"
                        onClick={() => setIsMenuOpen(!isMenuOpen)}>
                        <i className={`fa-solid ${isMenuOpen ? "fa-times" : "fa-bars"} text-xl`}></i>
                    </button>
                </div>
                { }
                <AnimatePresence>
                    {isMenuOpen && <motion.div
                        initial={{
                            opacity: 0,
                            height: 0
                        }}
                        animate={{
                            opacity: 1,
                            height: "auto"
                        }}
                        exit={{
                            opacity: 0,
                            height: 0
                        }}
                        className="md:hidden absolute top-full left-0 right-0 bg-white shadow-lg mt-2 rounded-b-lg overflow-hidden">
                        <div className="flex flex-col p-4 space-y-3">
                            {sections.map(section => <button
                                key={section.id}
                                onClick={() => scrollToSection(section.id)}
                                className={`py-2 px-4 rounded-lg text-left transition-colors ${activeSection === section.id ? "bg-indigo-50 text-indigo-600 font-medium" : "text-gray-600 hover:bg-gray-50"}`}>
                                {section.title}
                            </button>)}
                        </div>
                    </motion.div>}
                </AnimatePresence>
            </header>
            <main>
                { }
                <section
                    ref={el => sectionRefs.current.hero = el}
                    className="relative min-h-screen flex items-center justify-center overflow-hidden"
                    style={{
                        background: "linear-gradient(135deg, #1E293B 0%, #334155 100%)"
                    }}>
                    { }
                    <div className="absolute inset-0 opacity-20">
                        <img
                            src="https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=AI%20data%20analysis%20background%2C%20blue%20digital%20abstract%20pattern&sign=6924c59c515501958513a22734613712"
                            alt="AI数据分析背景"
                            className="w-full h-full object-cover" />
                    </div>
                    { }
                    <div
                        className="relative z-10 max-w-5xl mx-auto px-6 text-center text-white py-20">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            animate={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.8
                            }}>
                            <h1
                                className="font-['Playfair_Display'] text-5xl md:text-7xl font-bold mb-6 tracking-tight drop-shadow-lg">
                                <span
                                    className="bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-white">慧眼AI·简历解析系统</span>
                            </h1>
                            <p
                                className="text-xl md:text-3xl font-light tracking-wide text-blue-100 mb-8 max-w-3xl mx-auto">重塑招聘流程的智能革命
                            </p>
                            <div
                                className="w-24 h-1 bg-gradient-to-r from-blue-400 to-indigo-400 rounded-full mx-auto my-8"></div>
                            <p
                                className="text-lg md:text-xl text-blue-100 leading-relaxed mb-10 max-w-3xl mx-auto">基于大模型技术的新一代简历解析系统，实现高效、精准的人才筛选
                            </p>
                            <div
                                className="flex flex-wrap justify-center items-center gap-8 md:gap-12 mt-8">
                                <div
                                    className="flex flex-col items-center p-4 rounded-xl bg-white/10 backdrop-blur-sm transition-transform hover:scale-105">
                                    <div className="text-3xl md:text-4xl font-bold text-blue-300 mb-2">10秒</div>
                                    <div className="text-sm text-blue-200">简历处理速度</div>
                                </div>
                                <div className="hidden md:block w-px h-16 bg-blue-400/30"></div>
                                <div
                                    className="flex flex-col items-center p-4 rounded-xl bg-white/10 backdrop-blur-sm transition-transform hover:scale-105">
                                    <div className="text-3xl md:text-4xl font-bold text-blue-300 mb-2">96%</div>
                                    <div className="text-sm text-blue-200">解析精准度</div>
                                </div>
                                <div className="hidden md:block w-px h-16 bg-blue-400/30"></div>
                                <div
                                    className="flex flex-col items-center p-4 rounded-xl bg-white/10 backdrop-blur-sm transition-transform hover:scale-105">
                                    <div className="text-3xl md:text-4xl font-bold text-blue-300 mb-2">20+</div>
                                    <div className="text-sm text-blue-200">支持文件格式</div>
                                </div>
                            </div>
                            <motion.button
                                initial={{
                                    opacity: 0,
                                    y: 20
                                }}
                                animate={{
                                    opacity: 1,
                                    y: 0
                                }}
                                transition={{
                                    duration: 0.8,
                                    delay: 0.3
                                }}
                                onClick={() => scrollToSection("pain-points")}
                                className="mt-12 px-8 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-medium rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">了解更多 <i className="fa-solid fa-arrow-down ml-2"></i>
                            </motion.button>
                        </motion.div>
                    </div>
                </section>
                { }
                <section
                    ref={el => sectionRefs.current["pain-points"] = el}
                    className="py-20 bg-gray-50">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">市场痛点与机会</h2>
                        </motion.div>
                        <div className="grid md:grid-cols-2 gap-10">
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: -30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white rounded-2xl shadow-xl p-8 transform transition-all duration-300 hover:shadow-2xl">
                                <h3 className="text-2xl font-bold text-red-600 mb-6 flex items-center">
                                    <i className="fa-solid fa-exclamation-circle mr-3"></i>传统简历解析的痛点
                                </h3>
                                <ul className="space-y-6">
                                    <li className="flex items-start">
                                        <div className="bg-red-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                            <i className="fas fa-hourglass-half text-red-600"></i>
                                        </div>
                                        <div>
                                            <h4 className="font-semibold text-xl text-gray-800">效率低下</h4>
                                            <p className="text-gray-600 mt-1">人工筛选1000份简历需耗时8小时，平均每份简历仅用7秒判断</p>
                                        </div>
                                    </li>
                                    <li className="flex items-start">
                                        <div className="bg-red-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                            <i className="fas fa-exclamation-triangle text-red-600"></i>
                                        </div>
                                        <div>
                                            <h4 className="font-semibold text-xl text-gray-800">准确率不足</h4>
                                            <p className="text-gray-600 mt-1">传统系统在专业术语解析中错误率高达40%，导致人才筛选偏差</p>
                                        </div>
                                    </li>
                                    <li className="flex items-start">
                                        <div className="bg-red-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                            <i className="fas fa-language text-red-600"></i>
                                        </div>
                                        <div>
                                            <h4 className="font-semibold text-xl text-gray-800">多语言支持不足</h4>
                                            <p className="text-gray-600 mt-1">非中文简历占比增加，传统解析工具难以应对多语种简历</p>
                                        </div>
                                    </li>
                                    <li className="flex items-start">
                                        <div className="bg-red-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                            <i className="fas fa-file-alt text-red-600"></i>
                                        </div>
                                        <div>
                                            <h4 className="font-semibold text-xl text-gray-800">格式兼容性差</h4>
                                            <p className="text-gray-600 mt-1">复杂排版和扫描件解析困难，结构化数据提取不完整</p>
                                        </div>
                                    </li>
                                </ul>
                            </motion.div>
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: 30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6,
                                    delay: 0.2
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white rounded-2xl shadow-xl p-8 transform transition-all duration-300 hover:shadow-2xl">
                                <h3 className="text-2xl font-bold text-green-600 mb-6 flex items-center">
                                    <i className="fa-solid fa-lightbulb mr-3"></i>AI简历解析的市场机会
                                </h3>
                                { }
                                <div className="mb-8">
                                    <h4 className="font-semibold text-xl text-gray-800 mb-4">全球AI招聘市场规模</h4>
                                    <div className="bg-green-50 rounded-xl p-5 h-64">
                                        <ResponsiveContainer width="100%" height="100%">
                                            <BarChart data={marketData}>
                                                <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                                                <XAxis dataKey="year" stroke="#64748b" />
                                                <YAxis stroke="#64748b" />
                                                <Tooltip
                                                    formatter={value => [`${value} 亿美元`, "市场规模"]}
                                                    contentStyle={{
                                                        backgroundColor: "white",
                                                        border: "none",
                                                        borderRadius: "10px",
                                                        boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                                    }} />
                                                <Bar dataKey="value" fill="#10B981" radius={[4, 4, 0, 0]}>
                                                    {marketData.map((entry, index) => <Cell
                                                        key={`cell-${index}`}
                                                        fill={index === marketData.length - 1 ? "#059669" : "#10B981"} />)}
                                                </Bar>
                                            </BarChart>
                                        </ResponsiveContainer>
                                    </div>
                                </div>
                                { }
                                <div>
                                    <h4 className="font-semibold text-xl text-gray-800 mb-4">AI解析效率提升</h4>
                                    <div className="space-y-5">
                                        <div>
                                            <div className="flex justify-between mb-1">
                                                <span className="text-sm font-medium text-gray-700">处理速度</span>
                                                <span className="text-sm font-medium text-green-600">提升10倍</span>
                                            </div>
                                            <div className="w-full h-6 bg-gray-200 rounded-full overflow-hidden">
                                                <div
                                                    className="h-full bg-gradient-to-r from-green-400 to-green-600 rounded-full"
                                                    style={{
                                                        width: "90%"
                                                    }}></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div className="flex justify-between mb-1">
                                                <span className="text-sm font-medium text-gray-700">准确率</span>
                                                <span className="text-sm font-medium text-green-600">98%</span>
                                            </div>
                                            <div className="w-full h-6 bg-gray-200 rounded-full overflow-hidden">
                                                <div
                                                    className="h-full bg-gradient-to-r from-green-400 to-green-600 rounded-full"
                                                    style={{
                                                        width: "98%"
                                                    }}></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div className="flex justify-between mb-1">
                                                <span className="text-sm font-medium text-gray-700">时间节省</span>
                                                <span className="text-sm font-medium text-green-600">缩短75%</span>
                                            </div>
                                            <div className="w-full h-6 bg-gray-200 rounded-full overflow-hidden">
                                                <div
                                                    className="h-full bg-gradient-to-r from-green-400 to-green-600 rounded-full"
                                                    style={{
                                                        width: "75%"
                                                    }}></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </motion.div>
                        </div>
                    </div>
                </section>
                
                {/* {产品概述 } */}
                <section
                    ref={el => sectionRefs.current.product = el}
                    className="py-20 bg-gradient-to-br from-blue-50 to-indigo-50">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">产品概述</h2>
                        </motion.div>
                        <div className="grid md:grid-cols-2 gap-12 items-center">
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: -30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6
                                }}
                                viewport={{
                                    once: true
                                }}>
                                <p className="text-lg text-gray-700 mb-8 leading-relaxed">基于大模型微调的智能简历解析系统，实现高效、准确的简历信息提取与人岗匹配，为企业招聘团队提供AI驱动的人才筛选解决方案。
                                </p>
                                <div
                                    className="bg-white rounded-2xl shadow-xl p-8 mb-8 transform transition-all duration-300 hover:shadow-2xl">
                                    <h3 className="text-xl font-bold text-indigo-700 mb-4">产品定位</h3>
                                    <p className="text-gray-600">面向企业招聘团队的AI驱动简历解析工具，通过微调的小模型实现高性能、高准确率、低延迟的简历信息提取与结构化，支持多语言、多格式，解决传统解析方案效率低下、准确率不足的痛点。
                                    </p>
                                </div>
                                <div
                                    className="bg-white rounded-2xl shadow-xl p-8 transform transition-all duration-300 hover:shadow-2xl">
                                    <h3 className="text-xl font-bold text-indigo-700 mb-6">核心价值</h3>
                                    <ul className="space-y-5">
                                        <li className="flex items-start">
                                            <div className="bg-indigo-100 p-3 rounded-full mr-4 flex-shrink-0">
                                                <i className="fa-solid fa-tachometer-alt text-indigo-600 text-lg"></i>
                                            </div>
                                            <div>
                                                <h4 className="font-semibold text-gray-800 text-lg">高效处理</h4>
                                                <p className="text-gray-600 mt-1">单份简历解析时间≤10秒，比传统方案提速10倍</p>
                                            </div>
                                        </li>
                                        <li className="flex items-start">
                                            <div className="bg-indigo-100 p-3 rounded-full mr-4 flex-shrink-0">
                                                <i className="fa-solid fa-bullseye text-indigo-600 text-lg"></i>
                                            </div>
                                            <div>
                                                <h4 className="font-semibold text-gray-800 text-lg">精准识别</h4>
                                                <p className="text-gray-600 mt-1">中英文核心字段解析F1值≥95%，支持多语言场景</p>
                                            </div>
                                        </li>
                                        <li className="flex items-start">
                                            <div className="bg-indigo-100 p-3 rounded-full mr-4 flex-shrink-0">
                                                <i className="fa-solid fa-coins text-indigo-600 text-lg"></i>
                                            </div>
                                            <div>
                                                <h4 className="font-semibold text-gray-800 text-lg">成本可控</h4>
                                                <p className="text-gray-600 mt-1">微调小模型降低计算资源消耗，运营成本降低70%</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </motion.div>
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: 30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6,
                                    delay: 0.2
                                }}
                                viewport={{
                                    once: true
                                }}>
                                <h3 className="text-2xl font-bold text-indigo-700 mb-8">核心功能</h3>
                                <div className="grid grid-cols-2 gap-6">
                                    <motion.div
                                        className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                        whileHover={{
                                            scale: 1.03
                                        }}>
                                        <div
                                            className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                            <i className="fa-solid fa-file-alt text-indigo-600 text-xl"></i>
                                        </div>
                                        <h4 className="font-semibold text-gray-800 mb-2">多格式支持</h4>
                                        <p className="text-sm text-gray-600">支持PDF、Word、图片等15+种文件格式，兼容扫描件与复杂排版
                                        </p>
                                    </motion.div>
                                    <motion.div
                                        className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                        whileHover={{
                                            scale: 1.03
                                        }}>
                                        <div
                                            className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                            <i className="fa-solid fa-language text-indigo-600 text-xl"></i>
                                        </div>
                                        <h4 className="font-semibold text-gray-800 mb-2">多语言解析</h4>
                                        <p className="text-sm text-gray-600">支持中英日韩等多国语言简历，解决国际化招聘需求
                                        </p>
                                    </motion.div>
                                    <motion.div
                                        className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                        whileHover={{
                                            scale: 1.03
                                        }}>
                                        <div
                                            className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                            <i className="fa-solid fa-database text-indigo-600 text-xl"></i>
                                        </div>
                                        <h4 className="font-semibold text-gray-800 mb-2">细颗粒度提取</h4>
                                        <p className="text-sm text-gray-600">提取100+维度信息，包括基本信息、工作经历、教育背景、技能等
                                        </p>
                                    </motion.div>
                                    <motion.div
                                        className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                        whileHover={{
                                            scale: 1.03
                                        }}>
                                        <div
                                            className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                            <i className="fa-solid fa-brain text-indigo-600 text-xl"></i>
                                        </div>
                                        <h4 className="font-semibold text-gray-800 mb-2">智能匹配</h4>
                                        <p className="text-sm text-gray-600">基于语义理解的人岗匹配算法，精准推荐合适人选
                                        </p>
                                    </motion.div>
                                    <motion.div
                                        className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                        whileHover={{
                                            scale: 1.03
                                        }}>
                                        <div
                                            className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                            <i className="fa-solid fa-chart-line text-indigo-600 text-xl"></i>
                                        </div>
                                        <h4 className="font-semibold text-gray-800 mb-2">数据分析</h4>
                                        <p className="text-sm text-gray-600">人才画像与数据可视化，辅助招聘决策
                                        </p>
                                    </motion.div>
                                    <motion.div
                                        className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                        whileHover={{
                                            scale: 1.03
                                        }}>
                                        <div
                                            className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                            <i className="fa-solid fa-plug text-indigo-600 text-xl"></i>
                                        </div>
                                        <h4 className="font-semibold text-gray-800 mb-2">系统集成</h4>
                                        <p className="text-sm text-gray-600">提供API接口，无缝对接现有招聘系统
                                        </p>
                                    </motion.div>
                                </div>
                            </motion.div>
                        </div>
                    </div>
                </section>

                 {/* 产品架构与创新点部分 */}
                <section
                    id="system-design"
                    ref={el => sectionRefs.current["system-design"] = el}
                    className="py-20 bg-gray-50">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">产品架构与创新点</h2>
                        </motion.div>

                        {/* 市场竞争现状分析 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                            <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">市场竞争现状分析</h3>

                            <div className="grid md:grid-cols-5 gap-6">
                                <div className="md:col-span-3 bg-gradient-to-br from-indigo-50 to-purple-50 p-6 rounded-xl">
                                    <h4 className="text-lg font-bold text-indigo-800 mb-4">主要竞品情况</h4>
                                    <ul className="space-y-4">
                                        <li className="flex items-start">
                                            <div className="bg-indigo-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                                <i className="fa-solid fa-building text-indigo-600"></i>
                                            </div>
                                            <div>
                                                <h5 className="font-semibold text-gray-800">北森AI面试官</h5>
                                                <p className="text-sm text-gray-600">7×24小时面试，评估一致性90%+，已落地300+企业</p>
                                            </div>
                                        </li>
                                        <li className="flex items-start">
                                            <div className="bg-indigo-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                                <i className="fa-solid fa-search text-indigo-600"></i>
                                            </div>
                                            <div>
                                                <h5 className="font-semibold text-gray-800">智联招聘AI系统</h5>
                                                <p className="text-sm text-gray-600">VR虚拟环境、简历优化评分，行业薪资精准度92%</p>
                                            </div>
                                        </li>
                                        <li className="flex items-start">
                                            <div className="bg-indigo-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                                <i className="fa-solid fa-comments text-indigo-600"></i>
                                            </div>
                                            <div>
                                                <h5 className="font-semibold text-gray-800">BOSS直聘</h5>
                                                <p className="text-sm text-gray-600">直聊+AI匹配模式，跳过传统简历筛选环节</p>
                                            </div>
                                        </li>
                                        <li className="flex items-start">
                                            <div className="bg-indigo-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                                <i className="fa-solid fa-user-tie text-indigo-600"></i>
                                            </div>
                                            <div>
                                                <h5 className="font-semibold text-gray-800">猎聘AI工具</h5>
                                                <p className="text-sm text-gray-600">候选人筛选和"Doris"AI结构化面试产品</p>
                                            </div>
                                        </li>
                                        <li className="flex items-start">
                                            <div className="bg-indigo-100 p-2 rounded-full mr-4 mt-1 flex-shrink-0">
                                                <i className="fa-solid fa-cloud text-indigo-600"></i>
                                            </div>
                                            <div>
                                                <h5 className="font-semibold text-gray-800">各类SaaS平台</h5>
                                                <p className="text-sm text-gray-600">提供AI简历筛选、匹配推荐等功能</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>

                                <div className="md:col-span-2 bg-gradient-to-br from-red-50 to-orange-50 p-6 rounded-xl flex flex-col justify-center">
                                    <h4 className="text-lg font-bold text-red-800 mb-4">市场痛点</h4>
                                    <ul className="space-y-3">
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                            <span className="text-sm text-gray-700">数据安全与隐私泄露风险</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                            <span className="text-sm text-gray-700">订阅费用持续增长，长期成本高</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                            <span className="text-sm text-gray-700">算法不透明，无法定制评估逻辑</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                            <span className="text-sm text-gray-700">难以融入企业现有招聘流程</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-exclamation-circle text-red-500 mt-1 mr-2"></i>
                                            <span className="text-sm text-gray-700">厂商锁定风险，数据迁移困难</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </motion.div>

                        {/* 核心差异化优势 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.2
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                            <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">核心差异化优势</h3>

                            <div className="grid md:grid-cols-2 gap-8">
                                {/* 数据主权与隐私安全 */}
                                <motion.div
                                    className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl hover:shadow-lg transition-shadow duration-300"
                                    whileHover={{
                                        scale: 1.02
                                    }}>
                                    <div className="w-14 h-14 bg-blue-600 rounded-full flex items-center justify-center mb-6">
                                        <i className="fa-solid fa-shield-alt text-white text-xl"></i>
                                    </div>
                                    <h4 className="text-xl font-bold text-blue-800 mb-4">数据主权与隐私安全</h4>
                                    <p className="text-gray-700 mb-4">简历数据不离开企业内网，100%数据主权，满足银行、政府、军工等敏感行业的数据安全要求。</p>
                                    <div className="bg-white p-4 rounded-lg text-sm">
                                        <p className="font-medium text-gray-800 mb-2">实际价值对比：</p>
                                        <ul className="space-y-2">
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-times-circle text-red-500 mt-1 mr-2"></i>
                                                <span><strong>北森等SaaS：</strong>数据存储在厂商云端，存在数据泄露风险</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-2"></i>
                                                <span><strong>我们的系统：</strong>数据100%存储在企业内部，完全可控</span>
                                            </li>
                                        </ul>
                                    </div>
                                </motion.div>

                                {/* 成本结构根本性差异 */}
                                <motion.div
                                    className="bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl hover:shadow-lg transition-shadow duration-300"
                                    whileHover={{
                                        scale: 1.02
                                    }}>
                                    <div className="w-14 h-14 bg-green-600 rounded-full flex items-center justify-center mb-6">
                                        <i className="fa-solid fa-money-bill-wave text-white text-xl"></i>
                                    </div>
                                    <h4 className="text-xl font-bold text-green-800 mb-4">成本结构根本性差异</h4>
                                    <p className="text-gray-700 mb-4">一次性投入，无需按年付费，避免成本不断增长，不按简历数量、用户数量收费，长期TCO优势显著。</p>
                                    <div className="bg-white p-4 rounded-lg text-sm">
                                        <p className="font-medium text-gray-800 mb-2">成本对比：</p>
                                        <ul className="space-y-2">
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-building text-gray-500 mt-1 mr-2"></i>
                                                <span><strong>北森AI面试官：</strong>约50-100万/年（中大型企业）</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check-circle text-green-500 mt-1 mr-2"></i>
                                                <span><strong>我们的系统：</strong>一次性部署成本 + 定制化服务费</span>
                                            </li>
                                        </ul>
                                    </div>
                                </motion.div>

                                {/* 完全可定制与透明度 */}
                                <motion.div
                                    className="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-xl hover:shadow-lg transition-shadow duration-300"
                                    whileHover={{
                                        scale: 1.02
                                    }}>
                                    <div className="w-14 h-14 bg-purple-600 rounded-full flex items-center justify-center mb-6">
                                        <i className="fa-solid fa-sliders-h text-white text-xl"></i>
                                    </div>
                                    <h4 className="text-xl font-bold text-purple-800 mb-4">完全可定制与透明度</h4>
                                    <p className="text-gray-700 mb-4">算法透明，所有评估逻辑公开可见，可按需调整，业务流程适配，可完全按照企业现有流程定制。</p>
                                    <div className="bg-white p-4 rounded-lg text-sm">
                                        <ul className="space-y-2">
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                                <span>评估模型参数可调整，适应企业特定需求</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                                <span>企业IT团队可完全理解和维护技术栈</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                                <span>支持本地化部署与私有定制开发</span>
                                            </li>
                                        </ul>
                                    </div>
                                </motion.div>

                                {/* 企业文化与价值观融入 + 技术栈现代化 */}
                                <motion.div
                                    className="bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl hover:shadow-lg transition-shadow duration-300"
                                    whileHover={{
                                        scale: 1.02
                                    }}>
                                    <div className="w-14 h-14 bg-amber-600 rounded-full flex items-center justify-center mb-6">
                                        <i className="fa-solid fa-lightbulb text-white text-xl"></i>
                                    </div>
                                    <h4 className="text-xl font-bold text-amber-800 mb-4">企业文化与技术创新</h4>
                                    <div className="space-y-4">
                                        <div>
                                            <h5 className="font-semibold text-gray-800 mb-2">企业文化与价值观融入</h5>
                                            <ul className="text-sm text-gray-700 space-y-1 ml-6 list-disc">
                                                <li>可根据企业文化定制评估维度</li>
                                                <li>针对特定行业深度定制（制造业、金融业等）</li>
                                                <li>完全符合中国企业的管理习惯和思维模式</li>
                                            </ul>
                                        </div>
                                        <div>
                                            <h5 className="font-semibold text-gray-800 mb-2">技术栈现代化与可持续发展</h5>
                                            <ul className="text-sm text-gray-700 space-y-1 ml-6 list-disc">
                                                <li>React 18 + TypeScript，易于二次开发</li>
                                                <li>API开放性，可与企业现有HR系统无缝集成</li>
                                                <li>云原生设计，支持容器化部署，易于扩容和维护</li>
                                            </ul>
                                        </div>
                                    </div>
                                </motion.div>
                            </div>
                        </motion.div>

                        {/* 竞争优势表格 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.4
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                            <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">竞争优势对比</h3>

                            <div className="overflow-x-auto">
                                <table className="w-full min-w-[800px] text-sm">
                                    <thead>
                                        <tr className="bg-indigo-50">
                                            <th className="p-4 text-left font-semibold text-gray-800">维度</th>
                                            <th className="p-4 text-center font-semibold text-gray-800">我们的系统</th>
                                            <th className="p-4 text-center font-semibold text-gray-800">北森/智联等SaaS</th>
                                            <th className="p-4 text-center font-semibold text-gray-800">开源竞品</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td className="p-4 font-medium text-gray-800">数据安全</td>
                                            <td className="p-4 text-center font-bold text-green-600">🟢 完全本地化</td>
                                            <td className="p-4 text-center font-bold text-red-600">🔴 存储在厂商云端</td>
                                            <td className="p-4 text-center font-bold text-yellow-600">🟡 需自行保障</td>
                                        </tr>
                                        <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td className="p-4 font-medium text-gray-800">成本模式</td>
                                            <td className="p-4 text-center font-bold text-green-600">🟢 一次性投入</td>
                                            <td className="p-4 text-center font-bold text-red-600">🔴 年费模式</td>
                                            <td className="p-4 text-center font-bold text-green-600">🟢 免费但需定制</td>
                                        </tr>
                                        <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td className="p-4 font-medium text-gray-800">可定制性</td>
                                            <td className="p-4 text-center font-bold text-green-600">🟢 完全开源可改</td>
                                            <td className="p-4 text-center font-bold text-red-600">🔴 配置化有限</td>
                                            <td className="p-4 text-center font-bold text-yellow-600">🟡 需技术能力</td>
                                        </tr>
                                        <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td className="p-4 font-medium text-gray-800">部署灵活性</td>
                                            <td className="p-4 text-center font-bold text-green-600">🟢 私有化部署</td>
                                            <td className="p-4 text-center font-bold text-red-600">🔴 只能云端</td>
                                            <td className="p-4 text-center font-bold text-green-600">🟢 私有化部署</td>
                                        </tr>
                                        <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                            <td className="p-4 font-medium text-gray-800">技术支持</td>
                                            <td className="p-4 text-center font-bold text-green-600">🟢 专业定制服务</td>
                                            <td className="p-4 text-center font-bold text-yellow-600">🟡 标准技术支持</td>
                                            <td className="p-4 text-center font-bold text-red-600">🔴 社区支持</td>
                                        </tr>
                                        <tr className="hover:bg-gray-50 transition-colors">
                                            <td className="p-4 font-medium text-gray-800">功能完整性</td>
                                            <td className="p-4 text-center font-bold text-green-600">🟢 全流程覆盖</td>
                                            <td className="p-4 text-center font-bold text-green-600">🟢 功能丰富</td>
                                            <td className="p-4 text-center font-bold text-red-600">🔴 功能基础</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </motion.div>

                        {/* 目标客户定位 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.6
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                            <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">精准的目标客户定位</h3>

                            <div className="grid md:grid-cols-2 gap-8">
                                <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-xl">
                                    <div className="flex items-center mb-4">
                                        <div className="bg-blue-100 p-3 rounded-full mr-4">
                                            <i className="fa-solid fa-building text-blue-600 text-xl"></i>
                                        </div>
                                        <h4 className="text-xl font-bold text-blue-800">政府与国企客户</h4>
                                    </div>
                                    <div className="space-y-4">
                                        <div>
                                            <h5 className="font-semibold text-gray-800 mb-2">核心痛点</h5>
                                            <p className="text-sm text-gray-700">数据安全要求极高，不能使用外部云服务，对隐私保护有严格规定</p>
                                        </div>
                                        <div>
                                            <h5 className="font-semibold text-gray-800 mb-2">我们的价值</h5>
                                            <p className="text-sm text-gray-700">提供符合等保要求的本地化解决方案，数据100%留存企业内部，满足合规需求</p>
                                        </div>
                                    </div>
                                </div>

                                <div className="bg-gradient-to-br from-green-50 to-teal-50 p-6 rounded-xl">
                                    <div className="flex items-center mb-4">
                                        <div className="bg-green-100 p-3 rounded-full mr-4">
                                            <i className="fa-solid fa-industry text-green-600 text-xl"></i>
                                        </div>
                                        <h4 className="text-xl font-bold text-green-800">制造业与传统企业</h4>
                                    </div>
                                    <div className="space-y-4">
                                        <div>
                                            <h5 className="font-semibold text-gray-800 mb-2">核心痛点</h5>
                                            <p className="text-sm text-gray-700">希望拥有自主可控的招聘系统，预算有限，追求长期成本效益</p>
                                        </div>
                                        <div>
                                            <h5 className="font-semibold text-gray-800 mb-2">我们的价值</h5>
                                            <p className="text-sm text-gray-700">一次投入，长期使用，无厂商依赖，可根据企业流程定制开发</p>
                                        </div>
                                    </div>
                                </div>

                                <div className="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-xl">
                                    <div className="flex items-center mb-4">
                                        <div className="bg-purple-100 p-3 rounded-full mr-4">
                                            <i className="fa-solid fa-line-chart text-purple-600 text-xl"></i>
                                        </div>
                                        <h4 className="text-xl font-bold text-purple-800">中型成长企业</h4>
                                    </div>
                                    <div className="space-y-4">
                                        <div>
                                            <h5 className="font-semibold text-gray-800 mb-2">核心痛点</h5>2972|                                             <p className="text-sm text-gray-700">SaaS成本随规模增长而快速上升，招聘需求波动大，需要灵活扩展</p>
                                        </div>
                                        <div>
                                            <h5 className="font-semibold text-gray-800 mb-2">我们的价值</h5>
                                            <p className="text-sm text-gray-700">固定成本投入，支持业务快速扩张，无用户数量和使用量限制</p>
                                        </div>
                                    </div>
                                </div>

                                <div className="bg-gradient-to-br from-amber-50 to-orange-50 p-6 rounded-xl">
                                    <div className="flex items-center mb-4">
                                        <div className="bg-amber-100 p-3 rounded-full mr-4">
                                            <i className="fa-solid fa-flask text-amber-600 text-xl"></i>
                                        </div>
                                        <h4 className="text-xl font-bold text-amber-800">技术导向企业</h4>
                                    </div>
                                    <div className="space-y-4">
                                        <div>
                                            <h5 className="font-semibold text-gray-800 mb-2">核心痛点</h5>
                                            <p className="text-sm text-gray-700">希望深度定制和技术掌控，对系统扩展性和API有较高要求</p>
                                        </div>
                                        <div>
                                            <h5 className="font-semibold text-gray-800 mb-2">我们的价值</h5>
                                            <p className="text-sm text-gray-700">开源透明，支持二次开发，提供完整API接口，可与现有系统无缝集成</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </motion.div>

                        {/* 营销话术建议 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.8
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white rounded-2xl shadow-xl p-8">
                            <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">营销话术建议</h3>

                            <div className="bg-gradient-to-r from-indigo-50 to-purple-50 p-6 rounded-xl mb-8">
                                <h4 className="text-xl font-bold text-indigo-800 mb-4 text-center">核心卖点</h4>
                                <p className="text-center italic text-gray-700">"在数据安全和成本可控的前提下，提供与大厂SaaS同等AI能力的私有化招聘解决方案"</p>
                            </div>

                            <div className="grid md:grid-cols-3 gap-6">
                                <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
                                    <h4 className="font-semibold text-gray-800 mb-4">差异化表达一</h4>
                                    <div className="space-y-3">
                                        <div className="flex items-start">
                                            <span className="text-red-500 font-medium mr-2">❌</span>
                                            <span className="text-gray-600">"我们也有AI能力"</span>
                                        </div>
                                        <div className="flex items-start">
                                            <span className="text-green-500 font-medium mr-2">✅</span>
                                            <span className="text-gray-800 font-medium">"我们让您拥有自己的AI招聘系统"</span>
                                        </div>
                                    </div>
                                </div>

                                <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
                                    <h4 className="font-semibold text-gray-800 mb-4">差异化表达二</h4>
                                    <div className="space-y-3">
                                        <div className="flex items-start">
                                            <span className="text-red-500 font-medium mr-2">❌</span>
                                            <span className="text-gray-600">"功能很强大"</span>
                                        </div>
                                        <div className="flex items-start">
                                            <span className="text-green-500 font-medium mr-2">✅</span>
                                            <span className="text-gray-800 font-medium">"数据永不出企业，成本完全可控"</span>
                                        </div>
                                    </div>
                                </div>

                                <div className="bg-white p-6 rounded-xl border border-gray-100 shadow-sm">
                                    <h4 className="font-semibold text-gray-800 mb-4">差异化表达三</h4>
                                    <div className="space-y-3">
                                        <div className="flex items-start">
                                            <span className="text-red-500 font-medium mr-2">❌</span>
                                            <span className="text-gray-600">"可以定制"</span>
                                        </div>
                                        <div className="flex items-start">
                                            <span className="text-green-500 font-medium mr-2">✅</span>
                                            <span className="text-gray-800 font-medium">"源码完全开放，按需深度改造"</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                    </div>
                </section>

                {/* 系统设计与功能模块部分 */}
                <section
                    // id="system-design"
                    ref={el => sectionRefs.current.architecture = el}
                    // ref={el => sectionRefs.current["system-design"] = el}
                    className="py-20 bg-gray-50">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">系统设计与功能模块</h2>
                        </motion.div>

                        {/* 功能模块部分 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.4
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white rounded-2xl shadow-xl p-8">
                            <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">系统功能清单</h3>

                            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                                {/* 左侧功能模块 */}
                                <div className="space-y-6">
                                    <div>
                                        <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                            <i className="fa-solid fa-home text-blue-500 mr-2"></i> Dashboard (仪表盘)
                                        </h4>
                                        <ul className="space-y-2 ml-6">
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">简历文件上传 (支持PDF、Word格式，最大10MB)</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">文件类型验证和大小检查</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">实时上传进度显示</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">PDF文件预览功能</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">岗位配置选择与评估维度权重调整</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <div>
                                        <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                            <i className="fa-solid fa-chart-line text-blue-500 mr-2"></i> EvaluationReport (评估报告)
                                        </h4>
                                        <ul className="space-y-2 ml-6">
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">AI生成的候选人评估概要</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">基于评分的面试推荐级别</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">多维度评估：专业背景、技能匹配、经验匹配、综合适配性</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">能力雷达图可视化展示</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">详细分析报告与改进建议</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <div>
                                        <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                            <i className="fa-solid fa-users text-blue-500 mr-2"></i> CandidateList (候选人管理)
                                        </h4>
                                        <ul className="space-y-2 ml-6">
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">候选人列表展示和分页</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">多维度筛选与搜索功能</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">批量操作与状态管理</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">PDF简历预览与面试安排功能</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>

                                {/* 右侧功能模块 */}
                                <div className="space-y-6">
                                    <div>
                                        <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                            <i className="fa-solid fa-bar-chart text-blue-500 mr-2"></i> Statistics (数据分析统计)
                                        </h4>
                                        <ul className="space-y-2 ml-6">
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">整体统计概览与趋势分析图表</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">专业表现分析与面试官工作量统计</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">岗位匹配度分析与成功率预测模型</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">候选人质量热力图与AI预测洞察</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <div>
                                        <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                            <i className="fa-solid fa-history text-blue-500 mr-2"></i> History (历史记录)
                                        </h4>
                                        <ul className="space-y-2 ml-6">
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">历史评估记录展示与多语言支持</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">初筛通过率统计与语言分布统计</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">快速跳转到评估报告与数据重新加载</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <div>
                                        <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                            <i className="fa-solid fa-calendar-alt text-blue-500 mr-2"></i> InterviewScheduler (面试安排)
                                        </h4>
                                        <ul className="space-y-2 ml-6">
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">面试时间选择与面试方式选择</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">面试官信息配置与面试地点设置</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">邮件通知发送与候选人状态更新</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <div>
                                        <h4 className="text-lg font-bold text-gray-800 mb-4 flex items-center">
                                            <i className="fa-solid fa-cogs text-blue-500 mr-2"></i> JobPositionConfig (岗位配置)
                                        </h4>
                                        <ul className="space-y-2 ml-6">
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">多岗位预定义与岗位信息编辑</span>
                                            </li>
                                            <li className="flex items-start">
                                                <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                                <span className="text-gray-700">评估权重配置与自动平衡功能</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </motion.div>

                        {/* 系统架构图部分 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.2
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                            <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">系统架构图</h3>

                            <div className="relative overflow-x-auto">
                                <div className="min-w-[900px]">
                                    {/* 分层架构图 */}
                                    <div className="flex flex-col space-y-8">
                                        {/* 用户界面层 */}
                                        <div className="bg-blue-50 p-4 rounded-lg">
                                            <h4 className="font-bold text-blue-800 mb-3">用户界面层 Presentation Layer</h4>
                                            <div className="grid grid-cols-2 gap-4 ml-4">
                                                <div className="bg-white p-3 rounded shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">核心页面</h5>
                                                    <ul className="text-sm text-gray-600 space-y-1">
                                                        <li>• Dashboard 仪表盘</li>
                                                        <li>• CandidateList 候选人管理</li>
                                                        <li>• EvaluationReport 评估报告</li>
                                                        <li>• Statistics 数据统计</li>
                                                        <li>• History 历史记录</li>
                                                    </ul>
                                                </div>
                                                <div className="bg-white p-3 rounded shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">通用组件</h5>
                                                    <ul className="text-sm text-gray-600 space-y-1">
                                                        <li>• InterviewScheduler 面试安排</li>
                                                        <li>• JobPositionConfig 岗位配置</li>
                                                        <li>• PDFPreview PDF预览</li>
                                                        <li>• MarkdownBlock Markdown渲染</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        {/* 业务逻辑层 */}
                                        <div className="bg-orange-50 p-4 rounded-lg">
                                            <h4 className="font-bold text-orange-800 mb-3">业务逻辑层 Business Logic Layer</h4>
                                            <div className="grid grid-cols-3 gap-4 ml-4">
                                                <div className="bg-white p-3 rounded shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">服务层</h5>
                                                    <ul className="text-sm text-gray-600 space-y-1">
                                                        <li>• tongyi 通义千问服务</li>
                                                        <li>• pdfParser PDF解析服务</li>
                                                    </ul>
                                                </div>
                                                <div className="bg-white p-3 rounded shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">工具层</h5>
                                                    <ul className="text-sm text-gray-600 space-y-1">
                                                        <li>• indexedDBStorage 存储工具</li>
                                                        <li>• utils 通用工具</li>
                                                    </ul>
                                                </div>
                                                <div className="bg-white p-3 rounded shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">钩子函数</h5>
                                                    <ul className="text-sm text-gray-600 space-y-1">
                                                        <li>• useTheme 主题钩子</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        {/* 配置层 */}
                                        <div className="bg-purple-50 p-4 rounded-lg">
                                            <h4 className="font-bold text-purple-800 mb-3">配置层 Configuration Layer</h4>
                                            <div className="ml-4">
                                                <div className="bg-white p-3 rounded shadow-sm w-1/3">
                                                    <h5 className="font-semibold text-gray-800 mb-2">岗位配置数据</h5>
                                                    <p className="text-sm text-gray-600">jobPositions</p>
                                                </div>
                                            </div>
                                        </div>

                                        {/* 数据存储层 */}
                                        <div className="bg-green-50 p-4 rounded-lg">
                                            <h4 className="font-bold text-green-800 mb-3">数据存储层 Data Storage Layer</h4>
                                            <div className="grid grid-cols-2 gap-4 ml-4">
                                                <div className="bg-white p-3 rounded shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">IndexedDB</h5>
                                                    <p className="text-sm text-gray-600">主存储</p>
                                                </div><div className="bg-white p-3 rounded shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">LocalStorage</h5>
                                                    <p className="text-sm text-gray-600">备份存储</p>
                                                </div>
                                            </div>
                                        </div>

                                        {/* 外部服务层 */}
                                        <div className="bg-red-50 p-4 rounded-lg">
                                            <h4 className="font-bold text-red-800 mb-3">外部服务层 External Services</h4>
                                            <div className="ml-4">
                                                <div className="bg-white p-3 rounded shadow-sm w-1/2">
                                                    <h5 className="font-semibold text-gray-800 mb-2">阿里云 DashScope</h5>
                                                    <ul className="text-sm text-gray-600 space-y-1">
                                                        <li>• 通义千问 qwen-long</li>
                                                        <li>• 通义千问 qwen3-next-80b</li>
                                                        <li>• 文件上传API</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </motion.div>

                        {/* 技术路线图部分 */}
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                            <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">技术演进路线图</h3>

                            <div className="relative overflow-x-auto">
                                <div className="min-w-[800px]">
                                    {/* 阶段指示器 */}
                                    <div className="flex justify-between items-center mb-12 relative">
                                        <div className="absolute top-1/2 left-0 right-0 h-1 bg-gray-200 -translate-y-1/2 z-0"></div>

                                        {/* 阶段1 */}
                                        <div className="relative z-10 flex flex-col items-center">
                                            <div className="w-16 h-16 rounded-full bg-green-500 flex items-center justify-center text-white font-bold text-xl mb-4 border-4 border-white shadow-lg">1</div>
                                            <h4 className="font-semibold text-gray-800">核心功能实现</h4>
                                            <p className="text-sm text-green-600 font-medium">已完成</p>
                                        </div>

                                        {/* 阶段2 */}
                                        <div className="relative z-10 flex flex-col items-center">
                                            <div className="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold text-xl mb-4 border-4 border-white shadow-lg">2</div>
                                            <h4 className="font-semibold text-gray-800">体验优化</h4>
                                            <p className="text-sm text-blue-600 font-medium">1-3个月</p>
                                        </div>

                                        {/* 阶段3 */}
                                        <div className="relative z-10 flex flex-col items-center">
                                            <div className="w-16 h-16 rounded-full bg-orange-500 flex items-center justify-center text-white font-bold text-xl mb-4 border-4 border-white shadow-lg">3</div>
                                            <h4 className="font-semibold text-gray-800">智能化升级</h4>
                                            <p className="text-sm text-orange-600 font-medium">3-6个月</p>
                                        </div>

                                        {/* 阶段4 */}
                                        <div className="relative z-10 flex flex-col items-center">
                                            <div className="w-16 h-16 rounded-full bg-purple-500 flex items-center justify-center text-white font-bold text-xl mb-4 border-4 border-white shadow-lg">4</div>
                                            <h4 className="font-semibold text-gray-800">平台化</h4>
                                            <p className="text-sm text-purple-600 font-medium">6-12个月</p>
                                        </div>

                                        {/* 阶段5 */}
                                        <div className="relative z-10 flex flex-col items-center">
                                            <div className="w-16 h-16 rounded-full bg-pink-500 flex items-center justify-center text-white font-bold text-xl mb-4 border-4 border-white shadow-lg">5</div>
                                            <h4 className="font-semibold text-gray-800">生态建设</h4>
                                            <p className="text-sm text-pink-600 font-medium">12个月+</p>
                                        </div>
                                    </div>

                                    {/* 阶段内容 */}
                                    <div className="space-y-10">
                                        {/* 阶段1详情 */}
                                        <div className="bg-green-50 p-6 rounded-xl">
                                            <h4 className="text-lg font-bold text-green-800 mb-4">第一阶段：核心功能实现 ✅</h4>
                                            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                                                <div className="bg-white p-4 rounded-lg shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">前端技术栈</h5>
                                                    <ul className="text-sm text-gray-600 space-y-1">
                                                        <li>• React 18 & TypeScript</li>
                                                        <li>• Tailwind CSS & Vite</li>
                                                        <li>• React Router</li>
                                                    </ul>
                                                </div>
                                                <div className="bg-white p-4 rounded-lg shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">AI能力集成</h5>
                                                    <ul className="text-sm text-gray-600 space-y-1">
                                                        <li>• 通义千问 SDK</li>
                                                        <li>• qwen-long (解析)</li>
                                                        <li>• qwen-3 (评估)</li>
                                                        <li>• 多语言支持</li>
                                                    </ul>
                                                </div>
                                                <div className="bg-white p-4 rounded-lg shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">数据存储</h5>
                                                    <ul className="text-sm text-gray-600 space-y-1">
                                                        <li>• IndexedDB 主存储</li>
                                                        <li>• LocalStorage 备份</li>
                                                        <li>• PDF 二进制存储</li>
                                                        <li>• 数据迁移方案</li>
                                                    </ul>
                                                </div>
                                                <div className="bg-white p-4 rounded-lg shadow-sm">
                                                    <h5 className="font-semibold text-gray-800 mb-2">业务功能</h5>
                                                    <ul className="text-sm text-gray-600 space-y-1">
                                                        <li>• 简历上传与解析</li>
                                                        <li>• AI 匹配与评估</li>
                                                        <li>• 候选人管理</li>
                                                        <li>• 面试流程安排</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>

                                        {/* 其他阶段简要信息 */}
                                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                                            <div className="bg-blue-50 p-6 rounded-xl">
                                                <h4 className="text-lg font-bold text-blue-800 mb-3">第二阶段：体验优化 (1-3个月)</h4>
                                                <p className="text-sm text-gray-700">移动端适配、性能优化、用户体验提升、文件支持扩展</p>
                                            </div>
                                            <div className="bg-orange-50 p-6 rounded-xl">
                                                <h4 className="text-lg font-bold text-orange-800 mb-3">第三阶段：智能化升级 (3-6个月)</h4>
                                                <p className="text-sm text-gray-700">AI能力增强、数据智能、自动化流程、系统集成生态</p>
                                            </div>
                                            <div className="bg-purple-50 p-6 rounded-xl">
                                                <h4 className="text-lg font-bold text-purple-800 mb-3">第四阶段：平台化 (6-12个月)</h4>
                                                <p className="text-sm text-gray-700">微服务架构、多租户SaaS、开放平台、企业级特性</p>
                                            </div>
                                            <div className="bg-pink-50 p-6 rounded-xl">
                                                <h4 className="text-lg font-bold text-pink-800 mb-3">第五阶段：生态建设 (12个月+)</h4>
                                                <p className="text-sm text-gray-700">人才生态、AI开放平台、全球化部署、行业解决方案</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </motion.div>

                        
                    </div>
                </section>

                {/* { 技术架构} */}
                {/* <section
                    ref={el => sectionRefs.current.architecture = el}
                    className="py-20 bg-white">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">技术架构</h2>
                        </motion.div>
                        {}
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white rounded-2xl shadow-xl p-8 mb-16">
                            <h3 className="text-2xl font-semibold text-gray-800 mb-8 text-center">系统架构</h3>
                            <div className="flex flex-col items-center">
                                <div className="w-full max-w-5xl">
                                    <div className="flex flex-col md:flex-row justify-between items-center">
                                        {}
                                        <motion.div
                                            className="bg-blue-50 p-6 rounded-xl shadow-md w-full md:w-1/4 mb-8 md:mb-0 text-center"
                                            whileHover={{
                                                scale: 1.05
                                            }}
                                            transition={{
                                                duration: 0.3
                                            }}>
                                            <div
                                                className="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                                <i className="fa-solid fa-file-alt text-blue-600 text-xl"></i>
                                            </div>
                                            <h4 className="font-bold text-blue-800 mb-2">输入层</h4>
                                            <p className="text-sm text-blue-600">PDF/Word/图片</p>
                                            <div className="mt-4 text-xs text-gray-500">
                                                <p>多格式支持</p>
                                                <p>扫描件兼容</p>
                                            </div>
                                        </motion.div>
                                        <div className="hidden md:block text-2xl text-gray-400 mx-4">
                                            <i className="fa-solid fa-arrow-right"></i>
                                        </div>
                                        <div className="md:hidden text-2xl text-gray-400 my-4">
                                            <i className="fa-solid fa-arrow-down"></i>
                                        </div>
                                        {}
                                        <motion.div
                                            className="bg-green-50 p-6 rounded-xl shadow-md w-full md:w-2/5 mb-8 md:mb-0 text-center"
                                            whileHover={{
                                                scale: 1.05
                                            }}
                                            transition={{
                                                duration: 0.3
                                            }}>
                                            <div className="flex justify-center mb-4">
                                                <div
                                                    className="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mx-2">
                                                    <i className="fa-solid fa-eye text-green-600 text-xl"></i>
                                                </div>
                                                <div
                                                    className="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mx-2">
                                                    <i className="fa-solid fa-brain text-green-600 text-xl"></i>
                                                </div>
                                                <div
                                                    className="bg-green-100 w-14 h-14 rounded-full flex items-center justify-center mx-2">
                                                    <i className="fa-solid fa-cogs text-green-600 text-xl"></i>
                                                </div>
                                            </div>
                                            <h4 className="font-bold text-green-800 mb-2">处理层</h4>
                                            <p className="text-sm text-green-600">OCR + NLP + 微调小模型</p>
                                            <div className="mt-4 text-xs text-gray-500">
                                                <p>智能文档处理 + 大模型微调</p>
                                                <p>高效低延迟解析引擎</p>
                                            </div>
                                        </motion.div>
                                        <div className="hidden md:block text-2xl text-gray-400 mx-4">
                                            <i className="fa-solid fa-arrow-right"></i>
                                        </div>
                                        <div className="md:hidden text-2xl text-gray-400 my-4">
                                            <i className="fa-solid fa-arrow-down"></i>
                                        </div>
                                        {}
                                        <motion.div
                                            className="bg-purple-50 p-6 rounded-xl shadow-md w-full md:w-1/4 text-center"
                                            whileHover={{
                                                scale: 1.05
                                            }}
                                            transition={{
                                                duration: 0.3
                                            }}>
                                            <div
                                                className="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                                <i className="fa-solid fa-database text-purple-600 text-xl"></i>
                                            </div>
                                            <h4 className="font-bold text-purple-800 mb-2">输出层</h4>
                                            <p className="text-sm text-purple-600">结构化数据</p>
                                            <div className="mt-4 text-xs text-gray-500">
                                                <p>标准化数据</p>
                                                <p>API集成</p>
                                            </div>
                                        </motion.div>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                        {}
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.2
                            }}
                            viewport={{
                                once: true
                            }}
                            className="bg-white rounded-2xl shadow-xl p-8">
                            <h3 className="text-2xl font-semibold text-gray-800 mb-8 text-center">工作流程</h3>
                            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                                {}
                                <div className="bg-gray-50 p-6 rounded-xl">
                                    <div
                                        className="bg-blue-500 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">1</div>
                                    <h4 className="font-semibold text-lg text-gray-800 mb-3">文本提取</h4>
                                    <ul className="text-sm text-gray-600 space-y-2">
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-blue-500 mt-1 mr-2"></i>
                                            <span>OCR识别文本内容</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-blue-500 mt-1 mr-2"></i>
                                            <span>保留文档结构信息</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-blue-500 mt-1 mr-2"></i>
                                            <span>处理多语言文本</span>
                                        </li>
                                    </ul>
                                </div>
                                {}
                                <div className="bg-gray-50 p-6 rounded-xl">
                                    <div
                                        className="bg-green-500 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">2</div>
                                    <h4 className="font-semibold text-lg text-gray-800 mb-3">内容识别</h4>
                                    <ul className="text-sm text-gray-600 space-y-2">
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                            <span>NLP实体识别</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                            <span>微调小模型处理</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-green-500 mt-1 mr-2"></i>
                                            <span>关键信息提取</span>
                                        </li>
                                    </ul>
                                </div>
                                {}
                                <div className="bg-gray-50 p-6 rounded-xl">
                                    <div
                                        className="bg-purple-500 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">3</div>
                                    <h4 className="font-semibold text-lg text-gray-800 mb-3">结构化转换</h4>
                                    <ul className="text-sm text-gray-600 space-y-2">
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                            <span>信息分类整理</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                            <span>标准化数据格式</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-purple-500 mt-1 mr-2"></i>
                                            <span>数据质量验证</span>
                                        </li>
                                    </ul>
                                </div>
                                {}
                                <div className="bg-gray-50 p-6 rounded-xl">
                                    <div
                                        className="bg-amber-500 w-12 h-12 rounded-full flex items-center justify-center text-white font-bold text-xl mb-4">4</div>
                                    <h4 className="font-semibold text-lg text-gray-800 mb-3">应用输出</h4>
                                    <ul className="text-sm text-gray-600 space-y-2">
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-amber-500 mt-1 mr-2"></i>
                                            <span>API数据接口</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-amber-500 mt-1 mr-2"></i>
                                            <span>人岗匹配分析</span>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check text-amber-500 mt-1 mr-2"></i>
                                            <span>招聘系统集成</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </motion.div>
                    </div>
                </section> */}


                {/* { 技术创新点} */}
                {/* <section
                    ref={el => sectionRefs.current.innovation = el}
                    className="py-20 bg-gradient-to-br from-indigo-50 to-purple-50">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">技术创新点</h2>
                        </motion.div>
                        <div className="grid md:grid-cols-2 gap-12">
                            { }
                            <div className="space-y-10">
                                { }
                                <motion.div
                                    initial={{
                                        opacity: 0,
                                        x: -30
                                    }}
                                    whileInView={{
                                        opacity: 1,
                                        x: 0
                                    }}
                                    transition={{
                                        duration: 0.5
                                    }}
                                    viewport={{
                                        once: true
                                    }}
                                    className="bg-white p-8 rounded-2xl shadow-lg transform transition-all duration-300 hover:shadow-xl">
                                    <div className="flex items-start">
                                        <div className="bg-indigo-100 p-3 rounded-full mr-5 flex-shrink-0">
                                            <i className="fa-solid fa-microchip text-indigo-600 text-xl"></i>
                                        </div>
                                        <div>
                                            <h3 className="text-xl font-bold text-indigo-800 mb-3">微调小模型技术</h3>
                                            <p className="text-gray-600">通过SFT全参数微调和LoRA低秩适配技术，在不损失准确度的情况下，将处理速度提升至350token/s，比大模型快10倍以上。
                                            </p>
                                        </div>
                                    </div>
                                </motion.div>
                                { }
                                <motion.div
                                    initial={{
                                        opacity: 0,
                                        x: -30
                                    }}
                                    whileInView={{
                                        opacity: 1,
                                        x: 0
                                    }}
                                    transition={{
                                        duration: 0.5,
                                        delay: 0.1
                                    }}
                                    viewport={{
                                        once: true
                                    }}
                                    className="bg-white p-8 rounded-2xl shadow-lg transform transition-all duration-300 hover:shadow-xl">
                                    <div className="flex items-start">
                                        <div className="bg-indigo-100 p-3 rounded-full mr-5 flex-shrink-0">
                                            <i className="fa-solid fa-language text-indigo-600 text-xl"></i>
                                        </div>
                                        <div>
                                            <h3 className="text-xl font-bold text-indigo-800 mb-3">多语言解析引擎</h3>
                                            <p className="text-gray-600">突破传统解析工具的语言限制，支持中英日韩等多国语言简历，中文解析准确率96%，英文解析准确率89%，远超传统方案。
                                            </p>
                                        </div>
                                    </div>
                                </motion.div>
                                { }
                                <motion.div
                                    initial={{
                                        opacity: 0,
                                        x: -30
                                    }}
                                    whileInView={{
                                        opacity: 1,
                                        x: 0
                                    }}
                                    transition={{
                                        duration: 0.5,
                                        delay: 0.2
                                    }}
                                    viewport={{
                                        once: true
                                    }}
                                    className="bg-white p-8 rounded-2xl shadow-lg transform transition-all duration-300 hover:shadow-xl">
                                    <div className="flex items-start">
                                        <div className="bg-indigo-100 p-3 rounded-full mr-5 flex-shrink-0">
                                            <i className="fa-solid fa-brain text-indigo-600 text-xl"></i>
                                        </div>
                                        <div>
                                            <h3 className="text-xl font-bold text-indigo-800 mb-3">智能文档处理流水线</h3>
                                            <p className="text-gray-600">创新的并行处理架构，将OCR和内容生成任务分解为多个并行子任务，实现单份简历解析时间≤10秒，比传统串行处理提速3倍。
                                            </p>
                                        </div>
                                    </div>
                                </motion.div>
                                { }
                                <motion.div
                                    initial={{
                                        opacity: 0,
                                        x: -30
                                    }}
                                    whileInView={{
                                        opacity: 1,
                                        x: 0
                                    }}
                                    transition={{
                                        duration: 0.5,
                                        delay: 0.3
                                    }}
                                    viewport={{
                                        once: true
                                    }}
                                    className="bg-white p-8 rounded-2xl shadow-lg transform transition-all duration-300 hover:shadow-xl">
                                    <div className="flex items-start">
                                        <div className="bg-indigo-100 p-3 rounded-full mr-5 flex-shrink-0">
                                            <i className="fa-solid fa-cloud text-indigo-600 text-xl"></i>
                                        </div>
                                        <div>
                                            <h3 className="text-xl font-bold text-indigo-800 mb-3">轻量级部署方案</h3>
                                            <p className="text-gray-600">基于WHALE平台的轻量级部署方案，单实例支持23 QPM，运行成本比大模型方案降低70%，实现高性能与低成本的完美平衡。
                                            </p>
                                        </div>
                                    </div>
                                </motion.div>
                            </div>
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: 30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white rounded-2xl shadow-xl p-8">
                                <h3 className="text-2xl font-bold text-purple-800 mb-8">竞争优势</h3>
                                { }
                                <div className="overflow-x-auto mb-10">
                                    <table className="w-full text-sm">
                                        <thead>
                                            <tr className="bg-purple-50">
                                                <th className="p-4 text-left font-semibold text-gray-800">指标</th>
                                                <th className="p-4 text-center font-semibold text-gray-800">传统解析</th>
                                                <th className="p-4 text-center font-semibold text-gray-800">大模型方案</th>
                                                <th className="p-4 text-center font-semibold text-purple-800">我们的方案</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                                <td className="p-4 font-medium text-gray-800">中文准确率</td>
                                                <td className="p-4 text-center text-gray-600">75.13%</td>
                                                <td className="p-4 text-center text-gray-600">98%</td>
                                                <td className="p-4 text-center font-bold text-purple-700">96%</td>
                                            </tr>
                                            <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                                <td className="p-4 font-medium text-gray-800">英文准确率</td>
                                                <td className="p-4 text-center text-gray-600">61.84%</td>
                                                <td className="p-4 text-center text-gray-600">90%</td>
                                                <td className="p-4 text-center font-bold text-purple-700">89%</td>
                                            </tr>
                                            <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                                <td className="p-4 font-medium text-gray-800">处理速度</td>
                                                <td className="p-4 text-center text-gray-600">30秒/份</td>
                                                <td className="p-4 text-center text-gray-600">60秒/份</td>
                                                <td className="p-4 text-center font-bold text-purple-700">10秒/份</td>
                                            </tr>
                                            <tr className="hover:bg-gray-50 transition-colors">
                                                <td className="p-4 font-medium text-gray-800">运行成本</td>
                                                <td className="p-4 text-center text-gray-600">高</td>
                                                <td className="p-4 text-center text-gray-600">极高</td>
                                                <td className="p-4 text-center font-bold text-purple-700">低</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                { }
                                <div>
                                    <h4 className="text-xl font-semibold text-purple-700 mb-5">核心竞争优势</h4>
                                    <ul className="space-y-4">
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                            <div>
                                                <p className="font-medium text-gray-800">精准度与大模型相当，成本降低70%</p>
                                                <p className="text-sm text-gray-600 mt-1">微调小模型实现接近大模型的准确率，同时大幅降低计算资源消耗</p>
                                            </div>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                            <div>
                                                <p className="font-medium text-gray-800">多语言支持，解决国际化招聘痛点</p>
                                                <p className="text-sm text-gray-600 mt-1">支持中英日韩等多国语言简历解析，满足全球化企业需求</p>
                                            </div>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                            <div>
                                                <p className="font-medium text-gray-800">高效处理复杂排版与扫描件</p>
                                                <p className="text-sm text-gray-600 mt-1">智能文档处理流水线能有效处理复杂排版和扫描件，解析准确率高</p>
                                            </div>
                                        </li>
                                        <li className="flex items-start">
                                            <i className="fa-solid fa-check-circle text-purple-600 mt-1 mr-3"></i>
                                            <div>
                                                <p className="font-medium text-gray-800">可持续迭代的技术架构</p>
                                                <p className="text-sm text-gray-600 mt-1">模块化设计支持持续优化和功能扩展，适应未来招聘场景变化</p>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </motion.div>
                        </div>
                    </div>
                </section> */}


                {/* {性能对比 } */}
                <section
                    ref={el => sectionRefs.current.performance = el}
                    className="py-20 bg-white">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">性能对比</h2>
                        </motion.div>
                        <div className="grid md:grid-cols-2 gap-10">
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: -30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white rounded-2xl shadow-xl p-8">
                                <h3 className="text-2xl font-semibold text-blue-800 mb-6">处理效率与时间成本</h3>
                                { }
                                <div className="h-72 mb-8">
                                    <ResponsiveContainer width="100%" height="100%">
                                        <BarChart data={efficiencyData}>
                                            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                                            <XAxis dataKey="name" stroke="#64748b" />
                                            <YAxis stroke="#64748b" />
                                            <Tooltip
                                                contentStyle={{
                                                    backgroundColor: "white",
                                                    border: "none",
                                                    borderRadius: "10px",
                                                    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                                }} />
                                            <Legend />
                                            <Bar dataKey="传统方案" name="传统方案" fill="#94a3b8" radius={[4, 4, 0, 0]} />
                                            <Bar dataKey="AI方案" name="AI方案" fill="#3b82f6" radius={[4, 4, 0, 0]} />
                                        </BarChart>
                                    </ResponsiveContainer>
                                </div>
                                { }
                                <div className="grid grid-cols-2 gap-4">
                                    <div className="bg-blue-50 p-4 rounded-xl">
                                        <p className="text-sm text-blue-600 font-medium">传统人工筛选</p>
                                        <p className="text-2xl font-bold text-blue-800 mt-1">8小时</p>
                                        <p className="text-xs text-blue-500 mt-1">处理1000份简历</p>
                                    </div>
                                    <div className="bg-teal-50 p-4 rounded-xl">
                                        <p className="text-sm text-teal-600 font-medium">AI简历解析</p>
                                        <p className="text-2xl font-bold text-teal-800 mt-1">20分钟</p>
                                        <p className="text-xs text-teal-500 mt-1">处理1000份简历</p>
                                    </div>
                                    <div className="bg-blue-50 p-4 rounded-xl">
                                        <p className="text-sm text-blue-600 font-medium">传统招聘周期</p>
                                        <p className="text-2xl font-bold text-blue-800 mt-1">15天</p>
                                        <p className="text-xs text-blue-500 mt-1">从投递到初面反馈</p>
                                    </div>
                                    <div className="bg-teal-50 p-4 rounded-xl">
                                        <p className="text-sm text-teal-600 font-medium">AI招聘周期</p>
                                        <p className="text-2xl font-bold text-teal-800 mt-1">2.3天</p>
                                        <p className="text-xs text-teal-500 mt-1">从投递到初面反馈</p>
                                    </div>
                                </div>
                            </motion.div>
                            {/* {性能对比} */}
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: 30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6,
                                    delay: 0.2
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white rounded-2xl shadow-xl p-8">
                                <h3 className="text-2xl font-semibold text-blue-800 mb-6">准确率与多语言支持</h3>
                                { }
                                <div className="h-72 mb-8">
                                    <ResponsiveContainer width="100%" height="100%">
                                        <RadarChart data={accuracyData}>
                                            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                                            <PolarGrid stroke="#e2e8f0" />
                                            <PolarAngleAxis dataKey="subject" stroke="#64748b" />
                                            <PolarRadiusAxis stroke="#64748b" />
                                            <Tooltip
                                                contentStyle={{
                                                    backgroundColor: "white",
                                                    border: "none",
                                                    borderRadius: "10px",
                                                    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                                }} />
                                            <Legend />
                                            <Radar
                                                name="传统方案"
                                                dataKey="传统方案"
                                                stroke="#94a3b8"
                                                fill="#94a3b8"
                                                fillOpacity={0.3} />
                                            <Radar
                                                name="AI方案"
                                                dataKey="AI方案"
                                                stroke="#10b981"
                                                fill="#10b981"
                                                fillOpacity={0.3} />
                                        </RadarChart></ResponsiveContainer>
                                </div>
                                { }
                                <div>
                                    <h4 className="text-lg font-semibold text-blue-800 mb-4">多语言支持能力对比</h4>
                                    <div className="overflow-x-auto">
                                        <table className="w-full text-sm">
                                            <thead>
                                                <tr className="bg-blue-50">
                                                    <th className="p-3 text-left font-semibold text-gray-800">语言</th>
                                                    <th className="p-3 text-center font-semibold text-gray-800">传统方案</th>
                                                    <th className="p-3 text-center font-semibold text-teal-800">AI解析方案</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                                    <td className="p-3 font-medium text-gray-800">中文</td>
                                                    <td className="p-3 text-center text-gray-600">75.13%</td><td className="p-3 text-center font-bold text-teal-700">96%</td>
                                                </tr>
                                                <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                                    <td className="p-3 font-medium text-gray-800">英文</td>
                                                    <td className="p-3 text-center text-gray-600">61.84%</td>
                                                    <td className="p-3 text-center font-bold text-teal-700">89%</td>
                                                </tr>
                                                <tr className="border-b border-gray-100 hover:bg-gray-50 transition-colors">
                                                    <td className="p-3 font-medium text-gray-800">日语</td>
                                                    <td className="p-3 text-center text-gray-600">不支持</td>
                                                    <td className="p-3 text-center font-bold text-teal-700">85%</td>
                                                </tr>
                                                <tr className="hover:bg-gray-50 transition-colors">
                                                    <td className="p-3 font-medium text-gray-800">韩语</td>
                                                    <td className="p-3 text-center text-gray-600">不支持</td>
                                                    <td className="p-3 text-center font-bold text-teal-700">82%</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </motion.div>
                        </div>
                    </div>
                </section>


                {/* 商业价值与盈利模式 */}
                <section
                    ref={el => sectionRefs.current.business = el}
                    className="py-20 bg-gradient-to-br from-indigo-50 to-purple-50">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">商业价值与盈利模式</h2>
                        </motion.div>
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    y: 30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    y: 0
                                }}
                                transition={{
                                    duration: 0.5
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white rounded-2xl shadow-xl p-8 flex flex-col">
                                <h3 className="text-xl font-semibold text-indigo-800 mb-6">市场规模与增长</h3>
                                { }
                                <div className="h-60 mb-6">
                                    <ResponsiveContainer width="100%" height="100%">
                                        <AreaChart
                                            data={[{
                                                year: "2022",
                                                value: 1.05
                                            }, {
                                                year: "2024",
                                                value: 1.5
                                            }, {
                                                year: "2026",
                                                value: 2.3
                                            }, {
                                                year: "2028",
                                                value: 3.2
                                            }, {
                                                year: "2030",
                                                value: 4.12
                                            }]}>
                                            <defs>
                                                <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
                                                    <stop offset="5%" stopColor="#4F46E5" stopOpacity={0.8} />
                                                    <stop offset="95%" stopColor="#4F46E5" stopOpacity={0} />
                                                </linearGradient>
                                            </defs>
                                            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                                            <XAxis dataKey="year" stroke="#64748b" />
                                            <YAxis stroke="#64748b" />
                                            <Tooltip
                                                formatter={value => [`${value} 亿美元`, "市场规模"]}
                                                contentStyle={{
                                                    backgroundColor: "white",
                                                    border: "none",
                                                    borderRadius: "10px",
                                                    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                                }} />
                                            <Area
                                                type="monotone"
                                                dataKey="value"
                                                stroke="#4F46E5"
                                                fillOpacity={1}
                                                fill="url(#colorValue)" />
                                        </AreaChart>
                                    </ResponsiveContainer>
                                </div>
                                { }
                                <div className="space-y-4 mt-auto">
                                    <div className="bg-indigo-50 p-4 rounded-xl">
                                        <p className="text-sm text-indigo-600 font-medium">全球AI招聘市场规模</p>
                                        <p className="text-2xl font-bold text-indigo-800">4.12亿美元</p>
                                        <p className="text-xs text-indigo-500">预计2030年达到</p>
                                    </div>
                                    <div className="bg-purple-50 p-4 rounded-xl">
                                        <p className="text-sm text-purple-600 font-medium">年复合增长率</p>
                                        <p className="text-2xl font-bold text-purple-800">18.7%</p>
                                        <p className="text-xs text-purple-500">2024-2030年</p>
                                    </div>
                                </div>
                            </motion.div>
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    y: 30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    y: 0
                                }}
                                transition={{
                                    duration: 0.5,
                                    delay: 0.2
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white rounded-2xl shadow-xl p-8 flex flex-col">
                                <h3 className="text-xl font-semibold text-indigo-800 mb-6">投资回报分析</h3>
                                { }
                                <div className="bg-indigo-50 p-5 rounded-xl mb-6">
                                    <p className="text-sm text-indigo-600 font-medium">ROI计算公式</p>
                                    <p className="text-xl font-bold text-indigo-800 mt-2">ROI = (总收益 - 总成本) ÷ 总成本 × 100%</p>
                                </div>
                                { }
                                <div className="h-52 mb-6">
                                    <ResponsiveContainer width="100%" height="100%">
                                        <BarChart
                                            data={[{
                                                name: "传统解析方案",
                                                roi: 40
                                            }, {
                                                name: "AI解析方案",
                                                roi: 320
                                            }]}>
                                            <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
                                            <XAxis dataKey="name" stroke="#64748b" />
                                            <YAxis stroke="#64748b" />
                                            <Tooltip
                                                formatter={value => [`${value}%`, "投资回报率"]}
                                                contentStyle={{
                                                    backgroundColor: "white",
                                                    border: "none",
                                                    borderRadius: "10px",
                                                    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                                }} />
                                            <Bar dataKey="roi" radius={[4, 4, 0, 0]}>
                                                <Cell fill="#4F46E5" />
                                                <Cell fill="#8B5CF6" />
                                            </Bar>
                                        </BarChart>
                                    </ResponsiveContainer>
                                </div>
                                { }
                                <div className="grid grid-cols-2 gap-4 mt-auto">
                                    <div className="bg-indigo-50 p-3 rounded-lg">
                                        <p className="text-xs text-indigo-600 font-medium">招聘成本降低</p>
                                        <p className="text-xl font-bold text-indigo-800">70%</p>
                                    </div>
                                    <div className="bg-purple-50 p-3 rounded-lg">
                                        <p className="text-xs text-purple-600 font-medium">招聘周期缩短</p>
                                        <p className="text-xl font-bold text-purple-800">85%</p>
                                    </div>
                                    <div className="bg-indigo-50 p-3 rounded-lg">
                                        <p className="text-xs text-indigo-600 font-medium">人效提升</p>
                                        <p className="text-xl font-bold text-indigo-800">240%</p>
                                    </div>
                                    <div className="bg-purple-50 p-3 rounded-lg">
                                        <p className="text-xs text-purple-600 font-medium">投资回报周期</p>
                                        <p className="text-xl font-bold text-purple-800">6个月</p>
                                    </div>
                                </div>
                            </motion.div>
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    y: 30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    y: 0
                                }}
                                transition={{
                                    duration: 0.5,
                                    delay: 0.4
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white rounded-2xl shadow-xl p-8 flex flex-col">
                                <h3 className="text-xl font-semibold text-indigo-800 mb-6">盈利模式设计</h3>
                                { }
                                <div className="h-72 mb-6">
                                    <ResponsiveContainer width="100%" height="100%">
                                        <PieChart
                                            style={{
                                                padding: "4px"
                                            }}>
                                            <Pie
                                                data={profitData}
                                                cx="50%"
                                                cy="50%"
                                                labelLine={true}
                                                outerRadius={80}
                                                fill="#8884d8"
                                                dataKey="value"
                                                label={(
                                                    {
                                                        name,
                                                        percent
                                                    }
                                                ) => <text fontSize="12" textAnchor="middle">
                                                        {`${name} ${(percent * 100).toFixed(0)}%`}
                                                    </text>}
                                                dataKey="value"
                                                label={(
                                                    {
                                                        name,
                                                        percent
                                                    }
                                                ) => `${name} ${(percent * 100).toFixed(0)}%`}>
                                                {profitData.map((entry, index) => <Cell
                                                    key={`cell-${index}`}
                                                    fill={COLORS.chartColors[index % COLORS.chartColors.length]} />)}
                                            </Pie>
                                            <Tooltip
                                                formatter={value => [`${value}%`, "占比"]}
                                                contentStyle={{
                                                    backgroundColor: "white",
                                                    border: "none",
                                                    borderRadius: "10px",
                                                    boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                                }} />
                                        </PieChart>
                                    </ResponsiveContainer>
                                </div>
                                { }
                                <div className="space-y-3 mt-auto">
                                    <div className="bg-indigo-50 p-3 rounded-lg flex items-center">
                                        <div className="bg-indigo-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-cloud text-white text-sm"></i>
                                        </div>
                                        <div>
                                            <p className="text-sm font-medium text-indigo-800">SaaS订阅模式</p>
                                            <p className="text-xs text-indigo-600">按用户数量、功能模块和使用期限收费</p>
                                        </div>
                                    </div>
                                    <div className="bg-purple-50 p-3 rounded-lg flex items-center">
                                        <div className="bg-purple-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-chart-line text-white text-sm"></i>
                                        </div>
                                        <div>
                                            <p className="text-sm font-medium text-purple-800">按量计费模式</p>
                                            <p className="text-xs text-purple-600">基于简历处理量和API调用次数收费</p>
                                        </div>
                                    </div>
                                    <div className="bg-indigo-50 p-3 rounded-lg flex items-center">
                                        <div className="bg-indigo-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-handshake text-white text-sm"></i>
                                        </div>
                                        <div>
                                            <p className="text-sm font-medium text-indigo-800">增值服务模式</p>
                                            <p className="text-xs text-indigo-600">提供定制化开发、数据分析和咨询服务</p>
                                        </div>
                                    </div>
                                    <div className="bg-purple-50 p-3 rounded-lg flex items-center">
                                        <div className="bg-purple-600 p-2 rounded-full mr-3">
                                            <i className="fa-solid fa-code-branch text-white text-sm"></i>
                                        </div>
                                        <div>
                                            <p className="text-sm font-medium text-purple-800">合作伙伴模式</p>
                                            <p className="text-xs text-purple-600">与招聘平台和HR系统集成，分成收益</p>
                                        </div>
                                    </div>
                                </div>
                            </motion.div>
                        </div>
                    </div>
                </section>


                {/* 实施路径 */}
                <section
                    ref={el => sectionRefs.current.implementation = el}
                    className="py-20 bg-white">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">实施路径</h2>
                        </motion.div>
                        <div className="grid md:grid-cols-12 gap-10">
                            { }
                            <div className="md:col-span-7">
                                <h3 className="text-2xl font-semibold text-teal-800 mb-8">三阶段实施路径</h3>
                                <div className="space-y-12">
                                    { }
                                    <motion.div
                                        initial={{
                                            opacity: 0,
                                            x: -30
                                        }}
                                        whileInView={{
                                            opacity: 1,
                                            x: 0
                                        }}
                                        transition={{
                                            duration: 0.5
                                        }}
                                        viewport={{
                                            once: true
                                        }}
                                        className="bg-white border border-teal-100 p-6 rounded-2xl shadow-lg">
                                        <div className="flex">
                                            <div
                                                className="bg-teal-600 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">1</div>
                                            <div className="ml-6">
                                                <h4 className="text-xl font-bold text-teal-800 mb-4">基础建设期（0-6个月）</h4>
                                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                                    <div className="bg-teal-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-teal-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-database text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-teal-800">数据收集与标注</p>
                                                        </div>
                                                        <p className="text-xs text-teal-600 mt-2 ml-11">构建1.5万+高质量简历训练集</p>
                                                    </div>
                                                    <div className="bg-teal-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-teal-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-code text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-teal-800">模型选型与微调</p>
                                                        </div>
                                                        <p className="text-xs text-teal-600 mt-2 ml-11">基于Qwen系列模型进行SFT微调</p>
                                                    </div>
                                                    <div className="bg-teal-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-teal-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-cogs text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-teal-800">技术架构搭建</p>
                                                        </div>
                                                        <p className="text-xs text-teal-600 mt-2 ml-11">OCR+NLP+微调小模型架构设计</p>
                                                    </div>
                                                    <div className="bg-teal-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-teal-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-flask text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-teal-800">MVP原型开发</p>
                                                        </div>
                                                        <p className="text-xs text-teal-600 mt-2 ml-11">核心功能验证与性能测试</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </motion.div>
                                    { }
                                    <motion.div
                                        initial={{
                                            opacity: 0,
                                            x: -30
                                        }}
                                        whileInView={{
                                            opacity: 1,
                                            x: 0
                                        }}
                                        transition={{
                                            duration: 0.5,
                                            delay: 0.2
                                        }}
                                        viewport={{
                                            once: true
                                        }}
                                        className="bg-white border border-blue-100 p-6 rounded-2xl shadow-lg">
                                        <div className="flex">
                                            <div
                                                className="bg-blue-600 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">2</div>
                                            <div className="ml-6">
                                                <h4 className="text-xl font-bold text-blue-800 mb-4">产品完善期（6-12个月）</h4>
                                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                                    <div className="bg-blue-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-blue-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-language text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-blue-800">多语言支持扩展</p>
                                                        </div>
                                                        <p className="text-xs text-blue-600 mt-2 ml-11">增加日韩等小语种支持</p>
                                                    </div>
                                                    <div className="bg-blue-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-blue-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-tachometer-alt text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-blue-800">性能优化</p>
                                                        </div>
                                                        <p className="text-xs text-blue-600 mt-2 ml-11">提升处理速度至≤5秒/份</p>
                                                    </div>
                                                    <div className="bg-blue-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-blue-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-plug text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-blue-800">API接口开发</p>
                                                        </div>
                                                        <p className="text-xs text-blue-600 mt-2 ml-11">标准化接口与集成方案</p>
                                                    </div>
                                                    <div className="bg-blue-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-blue-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-shield-alt text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-blue-800">安全合规建设</p>
                                                        </div>
                                                        <p className="text-xs text-blue-600 mt-2 ml-11">数据隐私保护与合规审核</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </motion.div>
                                    { }
                                    <motion.div
                                        initial={{
                                            opacity: 0,
                                            x: -30
                                        }}
                                        whileInView={{
                                            opacity: 1,
                                            x: 0
                                        }}
                                        transition={{
                                            duration: 0.5,
                                            delay: 0.4
                                        }}
                                        viewport={{
                                            once: true
                                        }}
                                        className="bg-white border border-purple-100 p-6 rounded-2xl shadow-lg">
                                        <div className="flex">
                                            <div
                                                className="bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl flex-shrink-0">3</div>
                                            <div className="ml-6">
                                                <h4 className="text-xl font-bold text-purple-800 mb-4">规模化推广期（12-24个月）</h4>
                                                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                                    <div className="bg-purple-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-purple-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-chart-line text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-purple-800">市场拓展</p>
                                                        </div>
                                                        <p className="text-xs text-purple-600 mt-2 ml-11">建立多元化销售渠道</p>
                                                    </div>
                                                    <div className="bg-purple-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-purple-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-handshake text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-purple-800">生态合作</p>
                                                        </div>
                                                        <p className="text-xs text-purple-600 mt-2 ml-11">与招聘平台和HR系统集成</p>
                                                    </div>
                                                    <div className="bg-purple-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-purple-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-globe text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-purple-800">国际化拓展</p>
                                                        </div>
                                                        <p className="text-xs text-purple-600 mt-2 ml-11">进入东南亚和欧美市场</p>
                                                    </div>
                                                    <div className="bg-purple-50 p-4 rounded-xl">
                                                        <div className="flex items-center">
                                                            <div className="bg-purple-600 p-2 rounded-full mr-3">
                                                                <i className="fa-solid fa-robot text-white text-sm"></i>
                                                            </div>
                                                            <p className="text-sm font-medium text-purple-800">产品迭代升级</p>
                                                        </div>
                                                        <p className="text-xs text-purple-600 mt-2 ml-11">智能匹配与人才画像功能</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </motion.div>
                                </div>
                            </div>
                            { }
                            <div className="md:col-span-5 flex flex-col">
                                <h3 className="text-2xl font-semibold text-teal-800 mb-8">市场推广策略</h3>
                                { }
                                <motion.div
                                    initial={{
                                        opacity: 0,
                                        x: 30
                                    }}
                                    whileInView={{
                                        opacity: 1,
                                        x: 0
                                    }}
                                    transition={{
                                        duration: 0.6
                                    }}
                                    viewport={{
                                        once: true
                                    }}
                                    className="bg-white p-6 rounded-2xl shadow-lg mb-8 flex-grow">
                                    <h4 className="text-xl font-semibold text-teal-800 mb-6">多渠道营销策略</h4>
                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                        <div className="bg-teal-50 p-4 rounded-xl">
                                            <div className="flex items-center">
                                                <div className="bg-teal-600 p-2 rounded-full mr-3">
                                                    <i className="fa-solid fa-bullhorn text-white text-sm"></i>
                                                </div>
                                                <p className="text-sm font-medium text-teal-800">内容营销</p>
                                            </div>
                                            <ul className="text-xs text-teal-600 mt-3 ml-11 space-y-1">
                                                <li>• 技术白皮书发布</li>
                                                <li>• 行业案例分享</li>
                                                <li>• 专家观点文章</li>
                                            </ul>
                                        </div>
                                        <div className="bg-blue-50 p-4 rounded-xl">
                                            <div className="flex items-center">
                                                <div className="bg-blue-600 p-2 rounded-full mr-3">
                                                    <i className="fa-solid fa-comments text-white text-sm"></i>
                                                </div>
                                                <p className="text-sm font-medium text-blue-800">社交媒体</p>
                                            </div>
                                            <ul className="text-xs text-blue-600 mt-3 ml-11 space-y-1">
                                                <li>• LinkedIn精准投放</li>
                                                <li>• 微信公众号运营</li>
                                                <li>• 行业社群建设</li>
                                            </ul>
                                        </div>
                                        <div className="bg-purple-50 p-4 rounded-xl">
                                            <div className="flex items-center">
                                                <div className="bg-purple-600 p-2 rounded-full mr-3">
                                                    <i className="fa-solid fa-laptop text-white text-sm"></i>
                                                </div>
                                                <p className="text-sm font-medium text-purple-800">线上推广</p>
                                            </div>
                                            <ul className="text-xs text-purple-600 mt-3 ml-11 space-y-1">
                                                <li>• SEM关键词投放</li>
                                                <li>• 行业网站广告</li>
                                                <li>• 电子邮件营销</li>
                                            </ul>
                                        </div>
                                        <div className="bg-green-50 p-4 rounded-xl">
                                            <div className="flex items-center">
                                                <div className="bg-green-600 p-2 rounded-full mr-3">
                                                    <i className="fa-solid fa-users text-white text-sm"></i>
                                                </div>
                                                <p className="text-sm font-medium text-green-800">线下活动</p>
                                            </div>
                                            <ul className="text-xs text-green-600 mt-3 ml-11 space-y-1">
                                                <li>• HR科技峰会</li>
                                                <li>• 行业展会参展</li>
                                                <li>• 技术沙龙</li>
                                            </ul>
                                        </div>
                                    </div>
                                </motion.div>
                                { }
                                <motion.div
                                    initial={{
                                        opacity: 0,
                                        x: 30
                                    }}
                                    whileInView={{
                                        opacity: 1,
                                        x: 0
                                    }}
                                    transition={{
                                        duration: 0.6,
                                        delay: 0.3
                                    }}
                                    viewport={{
                                        once: true
                                    }}
                                    className="bg-white p-6 rounded-2xl shadow-lg">
                                    <h4 className="text-xl font-semibold text-blue-800 mb-6">合作伙伴生态策略</h4>
                                    <div className="space-y-4">
                                        <div className="bg-gradient-to-r from-teal-50 to-blue-50 p-4 rounded-xl">
                                            <div className="flex items-center">
                                                <div className="bg-teal-600 p-2 rounded-full mr-3">
                                                    <i className="fa-solid fa-building text-white text-sm"></i>
                                                </div>
                                                <div>
                                                    <p className="text-sm font-medium text-teal-800">招聘平台集成</p>
                                                    <p className="text-xs text-teal-600 mt-1">与主流招聘网站建立API对接，实现简历一键解析功能</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="bg-gradient-to-r from-blue-50 to-purple-50 p-4 rounded-xl">
                                            <div className="flex items-center">
                                                <div className="bg-blue-600 p-2 rounded-full mr-3">
                                                    <i className="fa-solid fa-cog text-white text-sm"></i>
                                                </div>
                                                <div>
                                                    <p className="text-sm font-medium text-blue-800">HR系统合作</p>
                                                    <p className="text-xs text-blue-600 mt-1">与主流HR SaaS系统深度集成，提供一站式招聘解决方案</p>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="bg-gradient-to-r from-purple-50 to-teal-50 p-4 rounded-xl">
                                            <div className="flex items-center">
                                                <div className="bg-purple-600 p-2 rounded-full mr-3">
                                                    <i className="fa-solid fa-handshake text-white text-sm"></i>
                                                </div>
                                                <div>
                                                    <p className="text-sm font-medium text-purple-800">渠道代理合作</p>
                                                    <p className="text-xs text-purple-600 mt-1">建立区域代理商网络，覆盖全国主要城市和行业垂直市场</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </motion.div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* 团队说明 */}
                {/* <section
                    ref={el => sectionRefs.current.team = el}
                    className="py-20 bg-gradient-to-br from-indigo-50 to-purple-50">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">精英团队构成</h2>
                        </motion.div>
                        <div className="grid grid-cols-1 md:grid-cols-12 gap-10">
                            { }
                            <div className="md:col-span-7">
                                <h3 className="text-2xl font-semibold text-indigo-800 mb-8">团队架构</h3>
                                <motion.div
                                    initial={{
                                        opacity: 0,
                                        x: -30
                                    }}
                                    whileInView={{
                                        opacity: 1,
                                        x: 0
                                    }}
                                    transition={{
                                        duration: 0.6
                                    }}
                                    viewport={{
                                        once: true
                                    }}
                                    className="bg-white p-8 rounded-2xl shadow-xl h-[400px] flex items-center justify-center">
                                    <div className="relative w-full max-w-lg h-full">
                                        { }
                                        <div
                                            className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-36 h-36 bg-indigo-600 rounded-full flex items-center justify-center text-white text-center z-30">
                                            <div>
                                                <p className="font-bold text-lg">核心领导团队</p>
                                                <p className="text-xs mt-1">战略决策</p>
                                            </div>
                                        </div>
                                        { }
                                        <div
                                            className="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-purple-500 rounded-full flex items-center justify-center text-white text-center z-20">
                                            <div>
                                                <p className="font-bold">技术团队</p>
                                                <p className="text-xs mt-1">AI研发</p>
                                            </div>
                                        </div>
                                        { }
                                        <div
                                            className="absolute top-1/4 right-1/4 transform translate-x-1/2 -translate-y-1/2 w-32 h-32 bg-blue-500 rounded-full flex items-center justify-center text-white text-center z-20">
                                            <div>
                                                <p className="font-bold">产品团队</p>
                                                <p className="text-xs mt-1">用户体验</p>
                                            </div>
                                        </div>
                                        { }
                                        <div
                                            className="absolute bottom-1/4 left-1/4 transform -translate-x-1/2 translate-y-1/2 w-32 h-32 bg-teal-500 rounded-full flex items-center justify-center text-white text-center z-20">
                                            <div>
                                                <p className="font-bold">数据团队</p>
                                                <p className="text-xs mt-1">数据处理</p>
                                            </div>
                                        </div>
                                        { }
                                        <div
                                            className="absolute bottom-1/4 right-1/4 transform translate-x-1/2 translate-y-1/2 w-32 h-32 bg-pink-500 rounded-full flex items-center justify-center text-white text-center z-20">
                                            <div>
                                                <p className="font-bold">商业团队</p>
                                                <p className="text-xs mt-1">市场拓展</p>
                                            </div>
                                        </div>
                                        { }
                                        <div
                                            className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] rounded-full border-2 border-dashed border-gray-300 z-10"></div>
                                    </div>
                                </motion.div>
                            </div>
                            { }
                            <div className="md:col-span-5">
                                <h3 className="text-2xl font-semibold text-indigo-800 mb-8">团队规模与组成</h3>
                                <motion.div
                                    initial={{
                                        opacity: 0,
                                        x: 30
                                    }}
                                    whileInView={{
                                        opacity: 1,
                                        x: 0
                                    }}
                                    transition={{
                                        duration: 0.6,
                                        delay: 0.3
                                    }}
                                    viewport={{
                                        once: true
                                    }}
                                    className="bg-white p-8 rounded-2xl shadow-xl h-[400px] flex flex-col">
                                    <div className="grid grid-cols-2 gap-6 h-full">
                                        <div className="flex flex-col justify-center">
                                            <div className="mb-6">
                                                <p className="text-sm text-gray-600">核心团队成员</p>
                                                <p className="text-4xl font-bold text-indigo-800 mt-1">25<span className="text-lg">人</span></p>
                                            </div>
                                            <div className="mb-6">
                                                <p className="text-sm text-gray-600">技术人员占比</p>
                                                <p className="text-4xl font-bold text-purple-600 mt-1">65<span className="text-lg">%</span></p>
                                            </div>
                                            <div>
                                                <p className="text-sm text-gray-600">博士及以上学历</p>
                                                <p className="text-4xl font-bold text-blue-600 mt-1">40<span className="text-lg">%</span></p>
                                            </div>
                                        </div>
                                        <div className="flex items-center justify-center">
                                            <div className="w-full h-48">
                                                <ResponsiveContainer width="100%" height="100%">
                                                    <PieChart>
                                                        <Pie
                                                            data={teamCompositionData}
                                                            cx="50%"
                                                            cy="50%"
                                                            innerRadius={60}
                                                            outerRadius={90}
                                                            paddingAngle={5}
                                                            dataKey="value"
                                                            label={(
                                                                {
                                                                    name,
                                                                    percent
                                                                }
                                                            ) => `${name.split("模式")[0]} ${(percent * 100).toFixed(0)}%`}
                                                            label={(
                                                                {
                                                                    name,
                                                                    percent
                                                                }
                                                            ) => `${name} ${(percent * 100).toFixed(0)}%`}>
                                                            {teamCompositionData.map((entry, index) => <Cell
                                                                key={`cell-${index}`}
                                                                fill={COLORS.chartColors[index % COLORS.chartColors.length]} />)}
                                                        </Pie>
                                                        <Tooltip
                                                            formatter={value => [`${value}%`, "占比"]}
                                                            contentStyle={{
                                                                backgroundColor: "white",
                                                                border: "none",
                                                                borderRadius: "10px",
                                                                boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1)"
                                                            }} />
                                                    </PieChart>
                                                </ResponsiveContainer>
                                            </div>
                                        </div>
                                    </div>
                                </motion.div>
                            </div>
                        </div>
                        { }
                        <div className="mt-20">
                            <h3 className="text-2xl font-semibold text-indigo-800 mb-8 text-center">核心团队成员</h3>
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    y: 30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    y: 0
                                }}
                                transition={{
                                    duration: 0.6
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                                <div
                                    className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                                    <div className="bg-gradient-to-b from-indigo-50 to-white p-6 text-center">
                                        <div
                                            className="w-20 h-20 bg-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                            <i className="fa-solid fa-user-tie text-white text-2xl"></i>
                                        </div>
                                        <h4 className="font-bold text-indigo-800 text-lg">黄瑞馨 博士</h4>
                                        <p className="text-sm text-indigo-600 mb-3">首席执行官</p>
                                        <p className="text-xs text-gray-600">前BAT资深AI架构师，北京大学计算机博士，10年AI领域经验
                                        </p>
                                    </div>
                                </div>
                                <div
                                    className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                                    <div className="bg-gradient-to-b from-purple-50 to-white p-6 text-center">
                                        <div
                                            className="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                            <i className="fa-solid fa-laptop-code text-white text-2xl"></i>
                                        </div>
                                        <h4 className="font-bold text-purple-800 text-lg">张明 博士</h4>
                                        <p className="text-sm text-purple-600 mb-3">首席技术官</p>
                                        <p className="text-xs text-gray-600">前Google Brain研究员，清华大学AI实验室博士，NLP领域专家
                                        </p>
                                    </div>
                                </div>
                                <div
                                    className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                                    <div className="bg-gradient-to-b from-blue-50 to-white p-6 text-center">
                                        <div
                                            className="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                            <i className="fa-solid fa-lightbulb text-white text-2xl"></i>
                                        </div>
                                        <h4 className="font-bold text-blue-800 text-lg">李婷</h4>
                                        <p className="text-sm text-blue-600 mb-3">首席产品官</p>
                                        <p className="text-xs text-gray-600">前领英中国产品总监，8年HR科技产品经验，斯坦福MBA
                                        </p>
                                    </div>
                                </div>
                                <div
                                    className="bg-white rounded-2xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
                                    <div className="bg-gradient-to-b from-teal-50 to-white p-6 text-center">
                                        <div
                                            className="w-20 h-20 bg-teal-600 rounded-full flex items-center justify-center mx-auto mb-4">
                                            <i className="fa-solid fa-database text-white text-2xl"></i>
                                        </div>
                                        <h4 className="font-bold text-teal-800 text-lg">王强 博士</h4>
                                        <p className="text-sm text-teal-600 mb-3">首席数据官</p>
                                        <p className="text-xs text-gray-600">前阿里云数据科学家，麻省理工学院计算机科学博士，数据挖掘专家
                                        </p>
                                    </div>
                                </div>
                            </motion.div>
                        </div>
                    </div>
                </section> */}


                


               

                {/* {未来展望 } */}
                <section
                    ref={el => sectionRefs.current.future = el}
                    className="py-20 bg-gradient-to-br from-blue-900 to-purple-900 text-white">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">未来发展与创新方向</h2>
                        </motion.div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-10 mb-16">
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: -30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-blue-300/30">
                                <h3 className="text-2xl font-semibold text-blue-300 mb-8">技术发展趋势</h3>
                                <div className="relative pl-8 space-y-10">
                                    { }
                                    <div className="absolute left-0 top-0 h-full w-1 bg-blue-400/30"></div>
                                    { }
                                    <div className="relative">
                                        <div
                                            className="absolute left-[-10px] top-1 w-5 h-5 rounded-full bg-blue-400 border-4 border-blue-900"></div>
                                        <h4 className="text-xl font-bold text-blue-300 mb-3">&nbsp; &nbsp;2025-2026：多模态数据融合</h4>
                                        <p className="text-sm text-gray-300">融合简历文本、视频面试、社交媒体等多模态数据，实现更全面的人才画像和精准评估，解析准确率提升至98%
                                        </p>
                                    </div>
                                    { }
                                    <div className="relative">
                                        <div
                                            className="absolute left-[-10px] top-1 w-5 h-5 rounded-full bg-purple-400 border-4 border-blue-900"></div>
                                        <h4 className="text-xl font-bold text-purple-300 mb-3">&nbsp; &nbsp;2027-2028：增强人机协作</h4>
                                        <p className="text-sm text-gray-300">AI与招聘专家深度协作，形成"AI+人类"的混合决策模式，处理速度提升至≤3秒/份，人力成本降低85%
                                        </p>
                                    </div>
                                    { }
                                    <div className="relative">
                                        <div
                                            className="absolute left-[-10px] top-1 w-5 h-5 rounded-full bg-pink-400 border-4 border-blue-900"></div>
                                        <h4 className="text-xl font-bold text-pink-300 mb-3">&nbsp; &nbsp;2029-2030：智能人才生态</h4>
                                        <p className="text-sm text-gray-300">构建基于AI的全周期人才发展生态系统，从简历解析延伸至职业规划、技能发展和绩效预测，形成闭环人才管理
                                        </p>
                                    </div>
                                </div>
                            </motion.div>
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: 30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6,
                                    delay: 0.3
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-blue-300/30 flex flex-col justify-between">
                                <h3 className="text-2xl font-semibold text-blue-300 mb-8">市场规模预测</h3>
                                { }
                                <div className="flex items-end justify-around h-64 mb-8">
                                    <div className="flex flex-col items-center w-1/5">
                                        <div
                                            className="bg-gradient-to-t from-blue-600 to-blue-400 rounded-t-lg w-full"
                                            style={{
                                                height: "40px"
                                            }}></div>
                                        <span className="text-xs text-gray-300 mt-2">2023</span>
                                        <span className="text-xs text-blue-300 mt-1">60亿$</span>
                                    </div>
                                    <div className="flex flex-col items-center w-1/5">
                                        <div
                                            className="bg-gradient-to-t from-blue-600 to-blue-400 rounded-t-lg w-full"
                                            style={{
                                                height: "80px"
                                            }}></div>
                                        <span className="text-xs text-gray-300 mt-2">2025</span>
                                        <span className="text-xs text-blue-300 mt-1">120亿$</span>
                                    </div>
                                    <div className="flex flex-col items-center w-1/5">
                                        <div
                                            className="bg-gradient-to-t from-purple-600 to-purple-400 rounded-t-lg w-full"
                                            style={{
                                                height: "120px"
                                            }}></div>
                                        <span className="text-xs text-gray-300 mt-2">2027</span>
                                        <span className="text-xs text-purple-300 mt-1">180亿$</span>
                                    </div>
                                    <div className="flex flex-col items-center w-1/5">
                                        <div
                                            className="bg-gradient-to-t from-pink-600 to-pink-400 rounded-t-lg w-full"
                                            style={{
                                                height: "160px"
                                            }}></div>
                                        <span className="text-xs text-gray-300 mt-2">2030</span>
                                        <span className="text-xs text-pink-300 mt-1">240亿$</span>
                                    </div>
                                </div>
                                { }
                                <div className="text-center">
                                    <p className="text-xs text-gray-400">全球AI招聘市场规模预测（2023-2030）</p>
                                    <p className="text-xs text-blue-300 mt-2">年复合增长率(CAGR)：18.7%</p>
                                </div>
                            </motion.div>
                        </div>
                        { }
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 30
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.5
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h3 className="text-2xl font-semibold text-blue-300 mb-8 text-center">创新应用场景</h3>
                            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                                <div
                                    className="bg-gradient-to-br from-blue-800 to-blue-900 rounded-2xl p-6 flex flex-col">
                                    <div
                                        className="bg-blue-700 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                                        <i className="fa-solid fa-puzzle-piece text-blue-300 text-xl"></i>
                                    </div>
                                    <h4 className="text-xl font-semibold text-blue-300 mb-4">智能人才匹配</h4>
                                    <p className="text-sm text-gray-300 flex-grow">基于深度语义理解的人岗匹配算法，结合企业文化与团队协作需求，实现95%以上的匹配准确率，降低人才流失率40%
                                    </p>
                                    <div className="mt-6 flex items-center">
                                        <span className="text-xs text-blue-400">预计落地时间：</span>
                                        <span className="text-xs text-white ml-2">2025年Q4</span>
                                    </div>
                                </div>
                                <div
                                    className="bg-gradient-to-br from-purple-800 to-purple-900 rounded-2xl p-6 flex flex-col">
                                    <div
                                        className="bg-purple-700 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                                        <i className="fa-solid fa-globe-americas text-purple-300 text-xl"></i>
                                    </div>
                                    <h4 className="text-xl font-semibold text-purple-300 mb-4">全球化人才库</h4>
                                    <p className="text-sm text-gray-300 flex-grow">支持40+语言的简历解析与跨文化能力评估，打破地域限制，为企业提供全球化人才获取渠道，国际化招聘效率提升65%
                                    </p>
                                    <div className="mt-6 flex items-center">
                                        <span className="text-xs text-purple-400">预计落地时间：</span>
                                        <span className="text-xs text-white ml-2">2026年Q2</span>
                                    </div>
                                </div>
                                <div
                                    className="bg-gradient-to-br from-pink-800 to-pink-900 rounded-2xl p-6 flex flex-col">
                                    <div
                                        className="bg-pink-700 w-16 h-16 rounded-full flex items-center justify-center mb-6">
                                        <i className="fa-solid fa-chart-line text-pink-300 text-xl"></i>
                                    </div>
                                    <h4 className="text-xl font-semibold text-pink-300 mb-4">人才发展预测</h4>
                                    <p className="text-sm text-gray-300 flex-grow">基于历史数据和行业趋势，预测候选人未来3-5年的职业发展轨迹和潜力，为企业长期人才战略提供决策支持
                                    </p>
                                    <div className="mt-6 flex items-center">
                                        <span className="text-xs text-pink-400">预计落地时间：</span>
                                        <span className="text-xs text-white ml-2">2027年Q1</span>
                                    </div>
                                </div>
                            </div>
                        </motion.div>
                    </div>
                </section>


                {/* 资料数据来源 */}
                <section ref={el => sectionRefs.current.sources = el} className="py-20 bg-white">
                    <div className="max-w-7xl mx-auto px-6">
                        <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6
                            }}
                            viewport={{
                                once: true
                            }}>
                            <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">资料来源与数据引用</h2>
                        </motion.div>
                        <div className="grid md:grid-cols-2 gap-8">
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: -30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-gray-50 rounded-2xl shadow-lg p-8">
                                <h3 className="text-2xl font-bold text-blue-800 mb-6 flex items-center">
                                    <i className="fa-solid fa-chart-line mr-3 text-blue-600"></i>市场与技术数据来源
                                </h3>
                                <div className="space-y-6">
                                    <div>
                                        <h4 className="font-semibold text-lg text-gray-800 mb-3">市场规模与增长趋势</h4>
                                        <ul className="list-disc pl-6 space-y-2 text-gray-700">
                                            <li>Gartner《2023年人工智能在招聘领域应用市场报告》</li>
                                            <li>Grand View Research《AI in Recruitment Market Size Report, 2024-2030》</li>
                                            <li>IDC《中国人工智能应用市场分析报告2023》</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4 className="font-semibold text-lg text-gray-800 mb-3">技术性能数据</h4>
                                        <ul className="list-disc pl-6 space-y-2 text-gray-700">
                                            <li>供应商解析方案测试数据</li>
                                            <li>倍逻解析方案测试数据</li>
                                            <li>模型测试结果</li>
                                            <li>系统性能测试数据</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4 className="font-semibold text-lg text-gray-800 mb-3">商业价值数据</h4>
                                        <ul className="list-disc pl-6 space-y-2 text-gray-700">
                                            <li>McKinsey《AI in HR: Transforming Talent Acquisition》</li>
                                            <li>PwC《2023年人才管理趋势报告》</li>
                                            <li>ROI计算模型</li>
                                        </ul>
                                    </div>
                                </div>
                            </motion.div>
                            { }
                            <motion.div
                                initial={{
                                    opacity: 0,
                                    x: 30
                                }}
                                whileInView={{
                                    opacity: 1,
                                    x: 0
                                }}
                                transition={{
                                    duration: 0.6,
                                    delay: 0.2
                                }}
                                viewport={{
                                    once: true
                                }}
                                className="bg-gray-50 rounded-2xl shadow-lg p-8">
                                <h3 className="text-2xl font-bold text-blue-800 mb-6 flex items-center">
                                    <i className="fa-solid fa-book mr-3 text-blue-600"></i>行业趋势与技术实现参考
                                </h3>
                                <div className="space-y-6">
                                    <div>
                                        <h4 className="font-semibold text-lg text-gray-800 mb-3">技术实现参考</h4>
                                        <ul className="list-disc pl-6 space-y-2 text-gray-700">
                                            <li>阿里云《大模型微调最佳实践》</li>
                                            <li>阿里云智能文档服务技术文档</li>
                                            <li>WHALE平台技术文档</li>
                                            <li>Google《Multilingual NLP Best Practices》</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4 className="font-semibold text-lg text-gray-800 mb-3">行业趋势参考</h4>
                                        <ul className="list-disc pl-6 space-y-2 text-gray-700">
                                            <li>Gartner《2024年人工智能技术趋势展望》</li>
                                            <li>Forrester《The Future of Work 2025》</li>
                                            <li>World Economic Forum《Future of Jobs Report 2023》</li>
                                            <li>Harvard Business Review《AI-Powered Talent Matching》</li>
                                            <li>McKinsey《Global Talent Trends 2023》</li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4 className="font-semibold text-lg text-gray-800 mb-3">原始文章数据来源</h4>
                                        <p className="text-gray-700 pl-2">本白皮书和PPT的核心内容基于原文《本文正在参与「AI看你的｜首届阿里&蚂蚁内部AI实践案例」》中提供的实际案例和数据，包括微调小模型技术实现细节、模型性能测试数据、系统架构设计、部署方案选择和成本效益分析。
                                        </p>
                                    </div>
                                </div>
                            </motion.div>
                        </div>
                        { }
                        {/* <motion.div
                            initial={{
                                opacity: 0,
                                y: 20
                            }}
                            whileInView={{
                                opacity: 1,
                                y: 0
                            }}
                            transition={{
                                duration: 0.6,
                                delay: 0.4
                            }}
                            viewport={{
                                once: true
                            }}
                            className="mt-12 bg-gray-800 text-white p-6 rounded-xl flex flex-col md:flex-row items-center justify-between">
                            <div className="flex items-center mb-4 md:mb-0">
                                <i className="fa-solid fa-info-circle text-2xl mr-3 text-blue-400"></i>
                                <p className="text-sm text-gray-300">本文档中的所有数据和信息均来自公开发表的研究报告、行业白皮书和原始案例文章。如有侵权，请联系我们进行更正。
                                </p>
                            </div>
                            <div className="text-sm text-gray-400">© 2025 AI简历解析项目团队
                            </div>
                        </motion.div> */}
                    </div>
                </section>

            </main>
            {/* 脚注 */}
            <footer className="bg-gray-900 text-white py-12">
                <div className="max-w-7xl mx-auto px-6">
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
                        <div>
                            <div className="flex items-center space-x-2 mb-6">
                                <div
                                    className="w-10 h-10 rounded-lg bg-indigo-600 flex items-center justify-center">
                                    <i className="fa-solid fa-brain text-white"></i>
                                </div>
                                <span
                                    className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-400">慧眼AI·简历解析系统</span>
                            </div>
                            <p className="text-sm text-gray-400">基于大模型技术的新一代简历解析系统，实现高效、精准的人才筛选
                            </p>
                        </div>
                        <div>
                            <h4 className="text-lg font-semibold mb-6">快速链接</h4>
                            <ul className="space-y-3">
                                {sections.slice(1, 6).map(section => <li key={section.id}>
                                    <button
                                        onClick={() => scrollToSection(section.id)}
                                        className="text-sm text-gray-400 hover:text-indigo-400 transition-colors">
                                        {section.title}
                                    </button>
                                </li>)}
                            </ul>
                        </div>
                        <div>
                            <h4 className="text-lg font-semibold mb-6">更多内容</h4>
                            <ul className="space-y-3">
                                {sections.slice(6).map(section => <li key={section.id}>
                                    <button
                                        onClick={() => scrollToSection(section.id)}
                                        className="text-sm text-gray-400 hover:text-indigo-400 transition-colors">
                                        {section.title}
                                    </button>
                                </li>)}
                            </ul>
                        </div>
                        <div>
                            <h4 className="text-lg font-semibold mb-6">联系我们</h4>
                            <ul className="space-y-3 text-sm text-gray-400">
                                <li className="flex items-center">
                                    <i className="fa-solid fa-envelope mr-3 text-indigo-400"></i>
                                    <span>3066569430@qq.com</span>
                                </li>
                                <li className="flex items-center">
                                    <i className="fa-solid fa-phone mr-3 text-indigo-400"></i>
                                    <span>＋86 135 7136 4701</span>
                                </li>
                                <li className="flex items-center">
                                    <i className="fa-solid fa-map-marker-alt mr-3 text-indigo-400"></i>
                                    <span>陕西省西安市长安区西安财经大学</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div
                        className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                        <p className="text-sm text-gray-500">© 2025 AI简历解析项目团队. 保留所有权利.</p>
                        <div className="flex space-x-6 mt-4 md:mt-0">
                            <a
                                href="#"
                                className="text-gray-500 hover:text-indigo-400 transition-colors">
                                <i className="fa-brands fa-weixin text-xl"></i>
                            </a>
                            <a
                                href="#"
                                className="text-gray-500 hover:text-indigo-400 transition-colors">
                                <i className="fa-brands fa-weibo text-xl"></i>
                            </a>
                            <a
                                href="#"
                                className="text-gray-500 hover:text-indigo-400 transition-colors">
                                <i className="fa-brands fa-linkedin text-xl"></i>
                            </a>
                            <a
                                href="#"
                                className="text-gray-500 hover:text-indigo-400 transition-colors">
                                <i className="fa-brands fa-github text-xl"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </footer>


        </div>
    );
}